<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pandvil Downloader</title>
	<link rel="icon" type="image/x-icon" href="favicon.ico">
    <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">450</span></label>
        <input
                type="range"
                id="yPositionSlider"
                min="400"
                max="600"
                value="450"
                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>
