index-htmlsimulator.web.final.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>America Inc.: Economic Policy Simulator</title>
  <!-- Include Tailwind CSS via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- React, ReactDOM, and Recharts -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <style>
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      background-color: #f9fafb;
    }
    .range-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 5px;
      background: #e2e8f0;
      outline: none;
    }
    .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #3b82f6;
      cursor: pointer;
    }
    .range-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #3b82f6;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    const { useState, useEffect } = React;
    const { 
      LineChart, Line, XAxis, YAxis, CartesianGrid, 
      Tooltip, Legend, ResponsiveContainer 
    } = Recharts;

    const EconomicSimulator = () => {
      // Policy sliders
      const [taxRate, setTaxRate] = useState(25);
      const [infrastructureSpending, setInfrastructureSpending] = useState(3);
      const [spaceInvestment, setSpaceInvestment] = useState(0.5);
      const [deregulation, setDeregulation] = useState(5);
      const [tradePolicy, setTradePolicy] = useState(5);
      
      // Economic outcomes
      const [gdpGrowth, setGdpGrowth] = useState(0);
      const [jobsCreated, setJobsCreated] = useState(0);
      const [stockMarket, setStockMarket] = useState(0);
      const [nationalDebt, setNationalDebt] = useState(0);
      const [innovationIndex, setInnovationIndex] = useState(0);
      
      // Forecast data
      const [forecastData, setForecastData] = useState([]);
      const [showPremiumModal, setShowPremiumModal] = useState(false);
      
      // Calculate economic impacts
      useEffect(() => {
        // GDP Growth calculation
        const newGdpGrowth = (
          3.0 + 
          (deregulation - 5) * 0.2 + 
          (tradePolicy - 5) * 0.1 +
          (infrastructureSpending - 3) * 0.3 -
          Math.abs(taxRate - 20) * 0.05
        ).toFixed(1);
        
        // Jobs created calculation
        const newJobsCreated = (
          2.0 +
          (gdpGrowth - 2) * 0.5 +
          (infrastructureSpending - 3) * 0.3 +
          (spaceInvestment - 0.5) * 0.2
        ).toFixed(1);
        
        // Stock market performance
        const newStockMarket = (
          8.0 +
          (deregulation - 5) * 0.7 -
          (taxRate - 20) * 0.2 +
          (gdpGrowth - 2) * 2
        ).toFixed(1);
        
        // National debt impact
        const newNationalDebt = (
          0.8 +
          (taxRate - 30) * -0.1 +
          (infrastructureSpending - 3) * 0.3 +
          (spaceInvestment - 0.5) * 0.2
        ).toFixed(1);
        
        // Innovation index
        const newInnovationIndex = (
          5.0 +
          (spaceInvestment - 0.5) * 1.5 +
          (deregulation - 5) * 0.3 -
          (taxRate - 20) * 0.1
        ).toFixed(1);
        
        // Update state
        setGdpGrowth(parseFloat(newGdpGrowth));
        setJobsCreated(parseFloat(newJobsCreated));
        setStockMarket(parseFloat(newStockMarket));
        setNationalDebt(parseFloat(newNationalDebt));
        setInnovationIndex(parseFloat(newInnovationIndex));
        
        // Generate forecast data
        const newForecastData = [];
        const currentYear = new Date().getFullYear();
        let cumulativeGdp = 100;
        
        for (let i = 0; i < 4; i++) {
          cumulativeGdp *= (1 + parseFloat(newGdpGrowth) / 100);
          
          newForecastData.push({
            year: currentYear + i,
            gdp: cumulativeGdp.toFixed(1),
            jobs: (parseFloat(newJobsCreated) * (i + 1)).toFixed(1),
            stocks: (parseFloat(newStockMarket) * (i + 1)).toFixed(1)
          });
        }
        
        setForecastData(newForecastData);
      }, [taxRate, infrastructureSpending, spaceInvestment, deregulation, tradePolicy, gdpGrowth]);
      
      return (
        <div className="p-4 max-w-6xl mx-auto bg-gray-50 rounded-lg shadow-lg">
          <header className="mb-6 text-center relative">
            <div className="absolute top-0 right-0">
              <button 
                className="bg-yellow-500 text-white px-3 py-1 rounded-md text-sm font-bold hover:bg-yellow-600"
                onClick={() => setShowPremiumModal(true)}
              >
                Go Premium
              </button>
            </div>
            <h1 className="text-3xl font-bold text-blue-900">America Inc.: Economic Policy Simulator</h1>
            <p className="text-gray-600 mt-2">Adjust policy levers to see potential economic impacts</p>
          </header>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <h2 className="text-xl font-semibold mb-4 text-blue-800">Policy Settings</h2>
              
              <div className="space-y-6">
                <div>
                  <label className="flex justify-between">
                    <span>Corporate Tax Rate: {taxRate}%</span>
                    <span className="text-gray-500 text-sm">(15-40%)</span>
                  </label>
                  <input 
                    type="range" 
                    className="range-slider"
                    min="15" 
                    max="40" 
                    value={taxRate} 
                    onChange={(e) => setTaxRate(parseInt(e.target.value))}
                  />
                </div>
                
                <div>
                  <label className="flex justify-between">
                    <span>Infrastructure Spending: {infrastructureSpending}% of GDP</span>
                    <span className="text-gray-500 text-sm">(1-5%)</span>
                  </label>
                  <input 
                    type="range" 
                    className="range-slider"
                    min="1" 
                    max="5" 
                    step="0.1" 
                    value={infrastructureSpending} 
                    onChange={(e) => setInfrastructureSpending(parseFloat(e.target.value))}
                  />
                </div>
                
                <div>
                  <label className="flex justify-between">
                    <span>Space/Tech Investment: {spaceInvestment}% of GDP</span>
                    <span className="text-gray-500 text-sm">(0.1-2%)</span>
                  </label>
                  <input 
                    type="range" 
                    className="range-slider"
                    min="0.1" 
                    max="2" 
                    step="0.1" 
                    value={spaceInvestment} 
                    onChange={(e) => setSpaceInvestment(parseFloat(e.target.value))}
                  />
                </div>
                
                <div>
                  <label className="flex justify-between">
                    <span>Deregulation Level: {deregulation}</span>
                    <span className="text-gray-500 text-sm">(1-10)</span>
                  </label>
                  <input 
                    type="range" 
                    className="range-slider"
                    min="1" 
                    max="10" 
                    value={deregulation} 
                    onChange={(e) => setDeregulation(parseInt(e.target.value))}
                  />
                </div>
                
                <div>
                  <label className="flex justify-between">
                    <span>Trade Policy (Protectionist to Free): {tradePolicy}</span>
                    <span className="text-gray-500 text-sm">(1-10)</span>
                  </label>
                  <input 
                    type="range" 
                    className="range-slider"
                    min="1" 
                    max="10" 
                    value={tradePolicy} 
                    onChange={(e) => setTradePolicy(parseInt(e.target.value))}
                  />
                </div>
              </div>
            </div>
            
            <div>
              <h2 className="text-xl font-semibold mb-4 text-blue-800">Economic Impacts</h2>
              
              <div className="bg-white p-4 rounded-lg shadow mb-6">
                <div className="grid grid-cols-2 gap-4">
                  <div className="text-center">
                    <h3 className="text-gray-600">GDP Growth</h3>
                    <p className={`text-2xl font-bold ${gdpGrowth >= 3 ? 'text-green-600' : gdpGrowth >= 0 ? 'text-yellow-600' : 'text-red-600'}`}>
                      {gdpGrowth > 0 ? '+' : ''}{gdpGrowth}%
                    </p>
                  </div>
                  
                  <div className="text-center">
                    <h3 className="text-gray-600">Jobs Created (Millions)</h3>
                    <p className={`text-2xl font-bold ${jobsCreated >= 2.5 ? 'text-green-600' : jobsCreated >= 0 ? 'text-yellow-600' : 'text-red-600'}`}>
                      {jobsCreated > 0 ? '+' : ''}{jobsCreated}M
                    </p>
                  </div>
                  
                  <div className="text-center">
                    <h3 className="text-gray-600">Stock Market</h3>
                    <p className={`text-2xl font-bold ${stockMarket >= 10 ? 'text-green-600' : stockMarket >= 0 ? 'text-yellow-600' : 'text-red-600'}`}>
                      {stockMarket > 0 ? '+' : ''}{stockMarket}%
                    </p>
                  </div>
                  
                  <div className="text-center">
                    <h3 className="text-gray-600">Debt-to-GDP Change</h3>
                    <p className={`text-2xl font-bold ${nationalDebt <= -0.5 ? 'text-green-600' : nationalDebt <= 1 ? 'text-yellow-600' : 'text-red-600'}`}>
                      {nationalDebt > 0 ? '+' : ''}{nationalDebt}%
                    </p>
                  </div>
                  
                  <div className="text-center col-span-2">
                    <h3 className="text-gray-600">Innovation Index</h3>
                    <p className={`text-2xl font-bold ${innovationIndex >= 6 ? 'text-green-600' : innovationIndex >= 4 ? 'text-yellow-600' : 'text-red-600'}`}>
                      {innovationIndex}/10
                    </p>
                  </div>
                </div>
              </div>
              
              <div className="bg-white p-4 rounded-lg shadow">
                <h3 className="text-lg font-medium mb-2">4-Year Economic Forecast</h3>
                
                <div style={{ width: '100%', height: 300 }}>
                  <ResponsiveContainer>
                    <LineChart
                      data={forecastData}
                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="year" />
                      <YAxis />
                      <Tooltip />
                      <Legend />
                      <Line type="monotone" dataKey="gdp" stroke="#8884d8" name="GDP Index" />
                      <Line type="monotone" dataKey="jobs" stroke="#82ca9d" name="Jobs (Millions)" />
                      <Line type="monotone" dataKey="stocks" stroke="#ff7300" name="Stock Growth %" />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </div>
            </div>
          </div>
          
          {showPremiumModal && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
              <div className="bg-white rounded-lg p-6 max-w-md w-full">
                <div className="flex justify-between items-start mb-4">
                  <h3 className="text-xl font-bold text-blue-900">Upgrade to Premium</h3>
                  <button onClick={() => setShowPremiumModal(false)} className="text-gray-500 hover:text-gray-700">
                    ✕
                  </button>
                </div>
                
                <div className="mb-4">
                  <p className="text-gray-600 mb-4">Unlock advanced features and deeper analysis:</p>
                  
                  <ul className="space-y-2">
                    <li className="flex items-start">
                      <span className="text-green-500 mr-2">✓</span>
                      <span>Advanced economic models with 20+ variables</span>
                    </li>
                    <li className="flex items-start">
                      <span className="text-green-500 mr-2">✓</span>
                      <span>Downloadable reports and data exports</span>
                    </li>
                    <li className="flex items-start">
                      <span className="text-green-500 mr-2">✓</span>
                      <span>Save unlimited custom scenarios</span>
                    </li>
                  </ul>
                </div>
                
                <div className="bg-gray-50 p-4 rounded-lg mb-4">
                  <div className="flex justify-between items-center mb-2">
                    <span className="font-medium">Monthly Plan</span>
                    <span className="font-bold">$4.99/month</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="font-medium">Annual Plan</span>
                    <span className="font-bold">$49.99/year</span>
                  </div>
                </div>
                
                <button className="w-full bg-blue-600 text-white py-2 rounded font-medium hover:bg-blue-700">
                  Start 7-Day Free Trial
                </button>
              </div>
            </div>
          )}
          
          <footer className="mt-8 text-center text-sm text-gray-500">
            <p>© 2025 America Inc. Simulator</p>
            <p className="mt-2">This simulation is for educational purposes only and uses simplified economic models.</p>
          </footer>
        </div>
      );
    };

    // Render the app
    ReactDOM.render(<EconomicSimulator />, document.getElementById('root'));
  </script>
</body>
</html>