Deepseek Passive Income Website

<div id="yt-calculator">
  <style>
    #yt-calculator {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      background: #f9f9f9;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    #yt-calculator h2 {
      color: #ff0000;
      text-align: center;
      margin-bottom: 20px;
    }
    .input-group {
      display: flex;
      margin-bottom: 20px;
    }
    #channel-input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
      font-size: 16px;
    }
    #calculate-btn {
      padding: 10px 15px;
      background: #ff0000;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      font-size: 16px;
    }
    #calculate-btn:hover {
      background: #cc0000;
    }
    .result {
      display: none;
      margin-top: 20px;
    }
    .channel-info {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .channel-img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 15px;
      object-fit: cover;
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }
    .stat {
      background: white;
      padding: 15px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .stat-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }
    .stat-value {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
    .loading {
      display: none;
      text-align: center;
      padding: 10px;
    }
    .error {
      display: none;
      color: #ff0000;
      text-align: center;
      padding: 10px;
    }
  </style>

  <h2>YouTube Earnings Calculator</h2>
  <div class="input-group">
    <input type="text" id="channel-input" placeholder="Enter YouTube Channel ID">
    <button id="calculate-btn">Calculate</button>
  </div>
  
  <div class="loading">Loading channel data...</div>
  <div class="error"></div>
  
  <div class="result">
    <div class="channel-info">
      <img class="channel-img" id="channel-thumb">
      <div>
        <h3 id="channel-title"></h3>
        <p id="channel-subs"></p>
      </div>
    </div>
    
    <div class="stats">
      <div class="stat">
        <div class="stat-label">Monthly Earnings (USD)</div>
        <div class="stat-value" id="monthly-earnings">$0</div>
      </div>
      <div class="stat">
        <div class="stat-label">Sponsorship Price</div>
        <div class="stat-value" id="sponsorship-price">$0</div>
      </div>
      <div class="stat">
        <div class="stat-label">Total Views</div>
        <div class="stat-value" id="total-views">0</div>
      </div>
      <div class="stat">
        <div class="stat-label">Created</div>
        <div class="stat-value" id="created-date">-</div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const API_KEY = 'your api key';
      const btn = document.getElementById('calculate-btn');
      const input = document.getElementById('channel-input');
      const result = document.querySelector('.result');
      const loading = document.querySelector('.loading');
      const error = document.querySelector('.error');
      
      btn.addEventListener('click', calculateEarnings);
      
      function calculateEarnings() {
        const channelId = input.value.trim();
        
        if (!channelId) {
          showError('Please enter a Channel ID');
          return;
        }
        
        showLoading();
        hideError();
        hideResult();
        
        fetch(`https://www.googleapis.com/youtube/v3/channels?part=snippet,statistics&id=${channelId}&key=${API_KEY}`)
          .then(response => response.json())
          .then(data => {
            if (!data.items || data.items.length === 0) {
              throw new Error('Channel not found');
            }
            
            const channel = data.items[0];
            const stats = channel.statistics;
            const subs = parseInt(stats.subscriberCount) || 0;
            const views = parseInt(stats.viewCount) || 0;
            
            // Calculate estimates
            const monthlyEarnings = (views / 1000) * 1.5 / 12; // $1.5 CPM
            const sponsorshipPrice = subs * 0.01; // $10 per 1000 subs
            
            // Display results
            document.getElementById('channel-thumb').src = channel.snippet.thumbnails.medium.url;
            document.getElementById('channel-title').textContent = channel.snippet.title;
            document.getElementById('channel-subs').textContent = formatNumber(subs) + ' subscribers';
            document.getElementById('total-views').textContent = formatNumber(views);
            document.getElementById('monthly-earnings').textContent = formatMoney(monthlyEarnings);
            document.getElementById('sponsorship-price').textContent = formatMoney(sponsorshipPrice);
            document.getElementById('created-date').textContent = new Date(channel.snippet.publishedAt).toLocaleDateString();
            
            hideLoading();
            showResult();
          })
          .catch(err => {
            hideLoading();
            showError('Error: ' + (err.message || 'Failed to fetch channel data'));
          });
      }
      
      function formatNumber(num) {
        return num.toLocaleString();
      }
      
      function formatMoney(num) {
        return '$' + num.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 2});
      }
      
      function showLoading() {
        loading.style.display = 'block';
      }
      
      function hideLoading() {
        loading.style.display = 'none';
      }
      
      function showError(msg) {
        error.textContent = msg;
        error.style.display = 'block';
      }
      
      function hideError() {
        error.style.display = 'none';
      }
      
      function showResult() {
        result.style.display = 'block';
      }
      
      function hideResult() {
        result.style.display = 'none';
      }
    });
  </script>
</div>

You can copy the above code. Keep in mind you need to replace your api key

const API_KEY = ‘your api key’

Where ‘your api key’ is written you need to place your own API key.