index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drew's Embed Formatter</title>
    <link rel="stylesheet" href="Assets/style.css">
    <link rel="icon" href="Assets/icon.png" type="image/x-icon"> 
    <link href="https://fonts.googleapis.com/css2?family=Bona+Nova+SC&display=swap" rel="stylesheet">
</head>
<body>
   <header>
    <div class="container">
        <h1>Drew's Discord Embed Formatter</h1>
    </div>
    </header>
    
    <div class="form-container">
        <form id="movieForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="movieTitle">Movie Name:</label>
                <input type="text" id="movieTitle" name="movieTitle" required>
            </div>
            <div class="form-group">
                <label for="movieLink">Movie Link:</label>
                <input type="text" id="movieLink" name="movieLink" required>
            </div>
            <div class="form-group">
                <label>Backdrop Option</label>
                <div class="radio-container">
                    <input type="radio" id="backdropSearchOption" name="backdropOption" value="search">
                    <label for="backdropSearchOption">Search for Backdrop Image</label>
                    <input type="radio" id="customBackdropOption" name="backdropOption" value="custom">
                    <label for="customBackdropOption">Use Custom Backdrop URL</label>
                </div>
            </div>
            <div class="form-group" id="apiKeyContainer" style="display: none;">
                <label for="apiKey"><a href="https://www.themoviedb.org/settings/api" target="_blank" class="api-link">TMDB API Key</a></label>
                <input type="text" id="apiKey" name="apiKey">
            </div>
            <div class="form-group" id="backdropSearchContainer" style="display: none;">
                <label for="backdropSearch">Backdrop Image Search:</label>
                <input type="text" id="backdropSearch" name="backdropSearch" placeholder="Enter movie title to search for backdrop images">
            </div>
            <div class="form-group" id="customBackdropContainer" style="display: none;">
                <label for="customBackdropLink">Custom Backdrop URL</label>
                <input type="text" id="customBackdropLink" name="customBackdropLink" placeholder="Enter custom backdrop image URL">
            </div>
            <div class="form-group">
                <input type="submit" value="Generate Movie URL">
            </div>
        </form>
        <div class="backdrop-container">
            <div id="backdropResults" class="banner-results"></div>
        </div>
        <div id="result" class="generated-url"></div>
        <div class="info-section">
            <h2>Information</h2>
            <p>- You cannot use any file type from the source other than mp4.</p>
            <p>- For your embed you can choose whether you want a background or not. For a background search, you will need an API key (Which can be found via the hyperlink.) Otherwise, you may just use any custom image URL.</p>
            <p>- Click on the result to get the link once you have gone through the process. Send it to Discord afterward.</p>
            <p>Note: not all links work such as youtube, google drive etc.</p>
            <p>- Credits to <a href="https://discord.nfp.is/" class="info-link">Discord nfp</a> for the ability to embed.</p>
            <p>- Credits to <a href="https://www.themoviedb.org/" class="info-link">TMDB</a> for the backdrops.</p>
        </div>
    </div>

    <footer class="footer">
        <img src="Assets/starlover.png" alt="Starlover Icon" class="footer-icon">
        <p>© 2024 Made by Drew</p>
    </footer>

    <script>
        document.getElementById('movieForm').addEventListener('submit', function(event) {
            event.preventDefault();

            var movieTitle = document.getElementById('movieTitle').value.trim();
            var movieLink = document.getElementById('movieLink').value.trim();
            var backdropOption = document.querySelector('input[name="backdropOption"]:checked');
            var apiKey = document.getElementById('apiKey').value.trim();
            var customBackdropLink = document.getElementById('customBackdropLink').value.trim();
            var selectedBackdrop = document.querySelector('.banner-results img.selected');
            var backdropURL = '';

            if (!movieTitle || !movieLink) {
                alert('Please enter both the title and link.');
                return;
            }

            if (backdropOption && backdropOption.value === 'search' && selectedBackdrop) {
                backdropURL = 'https://image.tmdb.org/t/p/original' + selectedBackdrop.getAttribute('data-image-path');
            } else if (backdropOption && backdropOption.value === 'custom' && customBackdropLink) {
                backdropURL = customBackdropLink;
            }

            var encodedMovieLink = encodeURIComponent(movieLink);
            var generatedURL = `https://discord.nfp.is/?v=${encodedMovieLink}`;
            if (backdropURL) {
                generatedURL += `&i=${encodeURIComponent(backdropURL)}`;
            }
            
            var markdownResult = `[${movieTitle}](${generatedURL})`;
            displayGeneratedURL(markdownResult);
        });

        document.querySelectorAll('.radio-container input[type="radio"]').forEach(option => {
            option.addEventListener('change', function() {
                var apiKeyContainer = document.getElementById('apiKeyContainer');
                var backdropSearchContainer = document.getElementById('backdropSearchContainer');
                var customBackdropContainer = document.getElementById('customBackdropContainer');

                if (this.value === 'search') {
                    apiKeyContainer.style.display = 'block';
                    backdropSearchContainer.style.display = 'block';
                    customBackdropContainer.style.display = 'none';
                } else if (this.value === 'custom') {
                    apiKeyContainer.style.display = 'none';
                    backdropSearchContainer.style.display = 'none';
                    customBackdropContainer.style.display = 'block';
                }
            });
        });

        function displayGeneratedURL(url) {
            var resultDiv = document.getElementById('result');
            resultDiv.style.display = 'block';
            resultDiv.textContent = url;
        }

        document.getElementById('backdropSearch').addEventListener('input', function() {
            var apiKey = document.getElementById('apiKey').value.trim();
            var searchQuery = this.value.trim();

            if (!apiKey || !searchQuery) return;

            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.themoviedb.org/3/search/movie?api_key=' + apiKey + '&query=' + encodeURIComponent(searchQuery));
            xhr.onload = function() {
                if (xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    if (data.results && data.results.length > 0) {
                        var movieId = data.results[0].id;
                        var xhrBackdrop = new XMLHttpRequest();
                        xhrBackdrop.open('GET', 'https://api.themoviedb.org/3/movie/' + movieId + '/images?api_key=' + apiKey);
                        xhrBackdrop.onload = function() {
                            if (xhrBackdrop.status === 200) {
                                var backdropData = JSON.parse(xhrBackdrop.responseText);
                                var backdropResults = backdropData.backdrops;
                                var backdropResultsContainer = document.getElementById('backdropResults');
                                backdropResultsContainer.innerHTML = '';

                                if (backdropResults && backdropResults.length > 0) {
                                    backdropResults.slice(0, 5).forEach(function(image) {
                                        var imgElement = document.createElement('img');
                                        imgElement.src = 'https://image.tmdb.org/t/p/w500/' + image.file_path;
                                        imgElement.setAttribute('data-image-path', image.file_path);
                                        imgElement.addEventListener('click', function() {
                                            var selectedImages = document.querySelectorAll('.banner-results img.selected');
                                            selectedImages.forEach(function(selectedImg) {
                                                selectedImg.classList.remove('selected');
                                            });
                                            imgElement.classList.add('selected');
                                        });
                                        backdropResultsContainer.appendChild(imgElement);
                                    });
                                } else {
                                    backdropResultsContainer.textContent = 'No backdrops found for the selected media.';
                                }
                            }
                        };
                        xhrBackdrop.send();
                    }
                }
            };
            xhr.send();
        });
    </script>
</body>
</html>