<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>otgg insta</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>
<body>
  <div class="container"> 
    <div class="download-panel">
      <div id="formattedLinkDisplay" class="formatted-link"></div>

      <input
        type="text"
        id="videoUrlInput"
        placeholder="Enter video URL here"
        oninput="formatLink()"
        class="border border-gray-300 rounded-md px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4"
      />

      <button
        onclick="downloadVideo()"
        class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded w-full"
      >
        Download Video
      </button>
      <div id="downloadStatus"></div>
    </div>

    <canvas id="imageCanvas" width="1080" height="1920" class="mx-auto"></canvas>

    <div class="controls">
  <textarea
    id="captionInput"
    placeholder="Enter your caption here"
    class="border border-gray-300 rounded-md px-4 py-2 w-1/3 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4 source-sans-3-input"
    oninput="generateImage()"
    rows="2"
  ></textarea>

<div class="emoji-box">
    <img class="emoji" height="48" width="48" draggable="false" alt="Crying Emoji" 
        src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f62d.png" 
        onclick="insertEmoji('😭')">
    <img class="emoji" height="48" width="48" draggable="false" alt="Fire Emoji" 
        src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f525.png" 
        onclick="insertEmoji('🔥')">
    <img class="emoji" height="48" width="48" draggable="false" alt="Skull Emoji" 
        src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f480.png" 
        onclick="insertEmoji('💀')">
    <img class="emoji" height="48" width="48" draggable="false" alt="Laughing Emoji" 
        src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f602.png" 
        onclick="insertEmoji('😂')">		
    <img class="emoji" height="48" width="48" draggable="false" alt="Eyes Emoji" 
        src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f440.png" 
        onclick="insertEmoji('👀')">
</div>


      <label for="yPositionSlider">Y Position: <span id="yValue">380</span></label>
      <input
        type="range"
        id="yPositionSlider"
        min="345"
        max="500"
        value="380"
        step="5"
        oninput="updateYValueDisplay(); generateImage();"
      >

      <button
        onclick="downloadImage()"
        class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded mt-4"
      >
        Download Image
      </button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>
