ScreenTools.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Record your screen with audio, pause/resume recording, and export in HD MP4. Free online screen recorder with impressive UI and animations." />
  <meta name="keywords" content="screen recorder, online screen recorder, record screen with audio, mp4 screen recorder, screen capture tool" />
  <meta name="author" content="Your Name" />
  <title>Screen Recorder - Record Screen with Voice in HD</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
    }
    header {
      text-align: center;
      animation: fadeInDown 1s ease-in-out;
    }
    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .controls {
      margin: 20px;
      display: flex;
      gap: 10px;
    }
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      background-color: #1abc9c;
      color: white;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    button:hover {
      transform: scale(1.05);
    }
    .ad-space {
      margin-top: 30px;
      width: 100%;
      max-width: 728px;
      height: 90px;
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
    }
    video {
      margin-top: 20px;
      width: 100%;
      max-width: 800px;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <header>
    <h1>🎥 Screen Recorder Tool</h1>
    <p>Record your screen with voice in HD. Simple, powerful, free!</p>
  </header>

  <div class="controls">
    <button onclick="startRecording()">Start Recording</button>
    <button onclick="pauseRecording()">Pause</button>
    <button onclick="resumeRecording()">Resume</button>
    <button onclick="stopRecording()">Stop & Download</button>
  </div>

  <video id="preview" autoplay muted></video>

  <div class="ad-space">
    <!-- Google AdSense Placeholder -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
      style="display:inline-block;width:728px;height:90px"
      data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
      data-ad-slot="1234567890"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>

  <script>
    let mediaRecorder;
    let recordedChunks = [];
    let stream;

    async function startRecording() {
      stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
      const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const combined = new MediaStream([...stream.getVideoTracks(), ...audioStream.getAudioTracks()]);
      
      document.getElementById('preview').srcObject = combined;

      recordedChunks = [];
      mediaRecorder = new MediaRecorder(combined);

      mediaRecorder.ondataavailable = event => {
        if (event.data.size > 0) recordedChunks.push(event.data);
      };

      mediaRecorder.onstop = () => {
        const blob = new Blob(recordedChunks, { type: 'video/mp4' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'recording.mp4';
        a.click();
      };

      mediaRecorder.start();
    }

    function pauseRecording() {
      if (mediaRecorder && mediaRecorder.state === 'recording') {
        mediaRecorder.pause();
      }
    }

    function resumeRecording() {
      if (mediaRecorder && mediaRecorder.state === 'paused') {
        mediaRecorder.resume();
      }
    }

    function stopRecording() {
      if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        stream.getTracks().forEach(track => track.stop());
      }
    }
  </script>
</body>
</html>