explain me this app: <html><head><base href="https://websim.ai/market-research/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extensive Market Research Tool</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
  :root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --bg-color: #f8fafc;
    --container-bg: #ffffff;
    --text-color: #334155;
    --heading-color: #1e293b;
    --border-color: #e2e8f0;
    --shadow-color: rgba(0,0,0,0.1);
    --success-color: #10b981;
    --card-bg: #ffffff;
  }
  [data-theme="dark"] {
    --bg-color: #0f172a;
    --container-bg: #1e293b;
    --text-color: #e2e8f0;
    --heading-color: #f1f5f9;
    --border-color: #334155;
    --shadow-color: rgba(0,0,0,0.3);
    --card-bg: #1e293b;
  }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.7;
    background-color: var(--bg-color);
    color: var(--text-color);
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
  }
  .container {
    background-color: var(--container-bg);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 6px -1px var(--shadow-color), 
                0 2px 4px -2px var(--shadow-color);
  }
  h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--heading-color);
  }
  h2 {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
  }
  #input-section, #results-section {
    max-width: 600px;
    margin: 2rem auto;
    padding: 20px;
  }
  input, button {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
    width: 100%;
    border: 2px solid var(--border-color);
  }
  input {
    background: var(--bg-color);
    color: var(--text-color);
  }
  input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }
  button {
    background-color: var(--primary-color);
    font-weight: 600;
    border: none;
  }
  button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
  }
  #loading {
    text-align: center;
    display: none;
  }
  .spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .analysis-component {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
  }
  .analysis-component:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
  }
  .analysis-component h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
  }
  #results-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
  }
  @media (max-width: 600px) {
    #input-section {
      width: 100%;
      padding: 10px;
    }
    #results-section {
      padding: 10px;
    }
  }
  .theme-switch-wrapper {
    background: var(--container-bg);
    padding: 8px 16px;
    border-radius: 99px;
    box-shadow: 0 2px 4px var(--shadow-color);
    display: flex;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .theme-switch {
    width: 50px;
    height: 28px;
    position: relative;
  }
  .theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .4s;
    border-radius: 34px;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  input:checked + .slider {
    background-color: var(--primary-color);
  }
  input:checked + .slider:before {
    transform: translateX(22px);
  }
  .theme-switch-wrapper span {
    margin-left: 10px;
    font-size: 14px;
  }
</style>
</head>
<body>
  <div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="slider"></div>
    </label>
    <span>Dark Mode</span>
  </div>
  <div class="container">
    <h1>Extensive Market Research Tool</h1>
    
    <div id="input-section">
      <h2>Enter Stock Information</h2>
      <input type="text" id="ticker" placeholder="Enter Stock Ticker Symbol" required />
      <input type="text" id="company-name" placeholder="Enter Company Name" required />
      <button onclick="startAnalysis()">Analyze</button>
    </div>

    <div id="loading" style="display:none;">
      <div class="spinner"></div>
      <p>Analyzing data, please wait...</p>
    </div>

    <div id="results-section" style="display:none;">
      <h3>Analysis Results for <span id="company-title"></span></h3>
      <div class="analysis-component" id="overview"></div>
      <div class="analysis-component" id="financial-statements"></div>
      <div class="analysis-component" id="revenue-streams"></div>
      <div class="analysis-component" id="competitive-position"></div>
      <div class="analysis-component" id="management-team"></div>
      <div class="analysis-component" id="growth-strategy"></div>
      <div class="analysis-component" id="risks-challenges"></div>
      <div class="analysis-component" id="stock-performance"></div>
      <div class="analysis-component" id="analyst-opinions"></div>
      <div class="analysis-component" id="corporate-governance"></div>
      <div class="analysis-component" id="dividend-analysis"></div>
      <div class="analysis-component" id="esg-practices"></div>
      <div class="analysis-component" id="swot-analysis"></div>
    </div>
  </div>

  <script>
    const cache = {};

    async function getCachedResponse(key, prompt) {
      if (cache[key]) {
        return cache[key];
      }
      const response = await callAI(prompt);
      const markdownResponse = ensureMarkdown(response);
      cache[key] = markdownResponse;
      return markdownResponse;
    }

    function ensureMarkdown(text) {
      if (text.includes('#') || text.includes('*') || text.includes('```')) {
        return text;
      }
      return `\n\n${text}\n\n`;
    }

    async function callAI(prompt) {
      const response = await fetch(`https://text.pollinations.ai/${encodeURIComponent(prompt)}`);
      if (!response.ok) {
        throw new Error(`AI API error: ${response.statusText}`);
      }
      const data = await response.text();
      return data;
    }

    function validateInputs(ticker, companyName) {
      const tickerRegex = /^[A-Za-z]{1,5}$/;
      if (!tickerRegex.test(ticker)) {
        alert("Please enter a valid stock ticker symbol.");
        return false;
      }
      if (companyName.trim() === "") {
        alert("Please enter a valid company name.");
        return false;
      }
      return true;
    }

    async function startAnalysis() {
      const ticker = document.getElementById("ticker").value.toUpperCase();
      const companyName = document.getElementById("company-name").value.trim();

      if (!validateInputs(ticker, companyName)) return;

      document.getElementById("input-section").style.display = "none";
      document.getElementById("loading").style.display = "block";

      try {
        const [
          overview,
          financialStatements,
          revenueStreams,
          competitivePosition,
          managementTeam,
          growthStrategy,
          risksChallenges,
          stockPerformance,
          analystOpinions,
          corporateGovernance,
          dividendAnalysis,
          esgPractices,
          swotAnalysis
        ] = await Promise.all([
          getCompanyOverview(ticker, companyName),
          analyzeFinancialStatements(ticker),
          analyzeRevenueStreams(ticker),
          analyzeCompetitivePosition(ticker, companyName),
          assessManagementTeam(ticker, companyName),
          examineGrowthStrategy(ticker, companyName),
          identifyRisksChallenges(ticker, companyName),
          analyzeStockPerformance(ticker),
          summarizeAnalystOpinions(ticker),
          reviewCorporateGovernance(ticker, companyName),
          analyzeDividends(ticker),
          assessESGPractices(ticker, companyName),
          performSWOTAnalysis(ticker, companyName)
        ]);

        displayResult("overview", overview);
        displayResult("financial-statements", financialStatements);
        displayResult("revenue-streams", revenueStreams);
        displayResult("competitive-position", competitivePosition);
        displayResult("management-team", managementTeam);
        displayResult("growth-strategy", growthStrategy);
        displayResult("risks-challenges", risksChallenges);
        displayResult("stock-performance", stockPerformance);
        displayResult("analyst-opinions", analystOpinions);
        displayResult("corporate-governance", corporateGovernance);
        displayResult("dividend-analysis", dividendAnalysis);
        displayResult("esg-practices", esgPractices);
        displayResult("swot-analysis", swotAnalysis);

        document.getElementById("loading").style.display = "none";
        document.getElementById("results-section").style.display = "block";
        document.getElementById("company-title").innerText = companyName;
      } catch (error) {
        console.error(error);
        alert("An error occurred during analysis. Please try again.");
        document.getElementById("loading").style.display = "none";
        document.getElementById("input-section").style.display = "block";
      }
    }

    async function getCompanyOverview(ticker, companyName) {
      const prompt = `Provide a brief overview of ${companyName} (${ticker}), including its primary business model, key products or services, and position within its industry.`;
      return await getCachedResponse(`overview_${ticker}`, prompt);
    }

    async function analyzeFinancialStatements(ticker) {
      const prompt = `Analyze ${ticker}'s financial statements for the past 5 years. Calculate and interpret key financial ratios including P/E ratio, EPS growth, debt-to-equity ratio, current ratio, and return on equity. Identify any notable trends or red flags.`;
      return await getCachedResponse(`financials_${ticker}`, prompt);
    }

    async function analyzeRevenueStreams(ticker) {
      const prompt = `Examine ${ticker}'s revenue streams and profit margins. Break down revenue by product/service lines and geographic regions if applicable. Analyze the stability and growth potential of each revenue source.`;
      return await getCachedResponse(`revenue_${ticker}`, prompt);
    }

    async function analyzeCompetitivePosition(ticker, companyName) {
      const prompt = `Analyze the competitive position of ${companyName} (${ticker}) within its industry. Identify key competitors, market share, and competitive advantages or disadvantages.`;
      return await getCachedResponse(`competition_${ticker}`, prompt);
    }

    async function assessManagementTeam(ticker, companyName) {
      const prompt = `Assess the quality and experience of ${companyName}'s (${ticker}) management team. Highlight key executives, their backgrounds, and any notable achievements or concerns.`;
      return await getCachedResponse(`management_${ticker}`, prompt);
    }

    async function examineGrowthStrategy(ticker, companyName) {
      const prompt = `Examine ${companyName}'s (${ticker}) growth strategy. Identify key areas of investment, expansion plans, and potential challenges to growth.`;
      return await getCachedResponse(`growth_${ticker}`, prompt);
    }

    async function identifyRisksChallenges(ticker, companyName) {
      const prompt = `Identify potential risks and challenges facing ${companyName} (${ticker}). Consider industry-specific issues, regulatory concerns, and company-specific vulnerabilities.`;
      return await getCachedResponse(`risks_${ticker}`, prompt);
    }

    async function analyzeStockPerformance(ticker) {
      const prompt = `Analyze the historical stock performance of ${ticker}. Include metrics such as total return, volatility, and comparison to relevant market indices.`;
      return await getCachedResponse(`stock_${ticker}`, prompt);
    }

    async function summarizeAnalystOpinions(ticker) {
      const prompt = `Summarize recent analyst opinions on ${ticker}. Include consensus ratings, price targets, and key factors influencing analyst views.`;
      return await getCachedResponse(`analysts_${ticker}`, prompt);
    }

    async function reviewCorporateGovernance(ticker, companyName) {
      const prompt = `Review the corporate governance practices of ${companyName} (${ticker}). Assess board structure, executive compensation, and shareholder rights.`;
      return await getCachedResponse(`governance_${ticker}`, prompt);
    }

    async function analyzeDividends(ticker) {
      const prompt = `Analyze the dividend history and policy of ${ticker}. Evaluate dividend yield, payout ratio, and sustainability of dividend payments.`;
      return await getCachedResponse(`dividends_${ticker}`, prompt);
    }

    async function assessESGPractices(ticker, companyName) {
      const prompt = `Assess the Environmental, Social, and Governance (ESG) practices of ${companyName} (${ticker}). Highlight key initiatives, controversies, and areas for improvement.`;
      return await getCachedResponse(`esg_${ticker}`, prompt);
    }

    async function performSWOTAnalysis(ticker, companyName) {
      const prompt = `Perform a comprehensive SWOT (Strengths, Weaknesses, Opportunities, Threats) analysis for ${companyName} (${ticker}).`;
      return await getCachedResponse(`swot_${ticker}`, prompt);
    }

    function displayResult(sectionId, content) {
      const sectionTitle = capitalizeSection(sectionId);
      const htmlContent = marked.parse(content);
      document.getElementById(sectionId).innerHTML = `<h4>${sectionTitle}</h4>${htmlContent}`;
    }

    function capitalizeSection(section) {
      return section.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase());
    }

    // Theme switcher
    function setTheme(theme) {
      document.documentElement.setAttribute('data-theme', theme);
      localStorage.setItem('theme', theme);
    }

    function toggleTheme(e) {
      if (e.target.checked) {
        setTheme('dark');
      } else {
        setTheme('light');
      }    
    }

    // Check for saved theme preference
    const currentTheme = localStorage.getItem('theme') || 'light';
    if (currentTheme) {
      document.documentElement.setAttribute('data-theme', currentTheme);
      if (currentTheme === 'dark') {
        document.getElementById('checkbox').checked = true;
      }
    }

    // Add event listener for theme toggle
    document.getElementById('checkbox').addEventListener('change', toggleTheme);
  </script>
</body>
</html>