An app that generates a short and humorous obituary for a Twitter user's Verified Check Mark which disappeared on 4/20/2023, using ChatGPT. Input field for the username. Button that shares the obituary to twitter. Make the design of the app look like Twitter. Show a loading indicator while the obituary is being generated.

<html> <head>   <title>RIP Verified Check Mark Generator</title>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">   <style>     body {       background-color: #f5f8fa;     }     .card {       margin-top: 50px;       box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);     }     .form-control {       height: calc(2.75rem + 2px) !important;       border-radius: 9999px !important;       padding-left: 20px;       padding-right: 20px;     }     .btn-twitter {       background-color: #1DA1F2;       color: #fff;       border-radius: 9999px;       padding-left: 20px;       padding-right: 20px;       font-weight: 500;       border: none;     }     .btn-twitter:hover {       background-color: #0e8add;     }     .loading-indicator {       display: none;       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);     }   </style> </head> <body>   <div class="container-fluid">     <div class="row justify-content-center">       <div class="col-md-6">         <div class="card">           <div class="card-header bg-white">             <h3 class="text-center">Who lost their check mark?</h3>           </div>           <div class="card-body">             <form>               <div class="form-group">                 <label for="username">Twitter Username:</label><br />                 <input type="text" class="form-control" id="username" required><br />               </div>               <button type="submit" class="btn btn-primary btn-twitter" id="generate-btn">Create Obituary</button>               <div class="loading-indicator">                 <div class="spinner-border text-primary" role="status">                   <span class="visually-hidden">Loading...</span>                 </div>               </div>             </form>             <div class="mt-4">               <div id="obituary" class="d-none"></div><br />               <a href="#" id="share-btn" class="btn btn-primary btn-twitter d-none">Share on Twitter</a>             </div>           </div>         </div>       </div>     </div>   </div>   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>   <script>     const form = document.querySelector('form');     const generateBtn = document.querySelector('#generate-btn');     const obituary = document.querySelector('#obituary');     const shareBtn = document.querySelector('#share-btn');     const loadingIndicator = document.querySelector('.loading-indicator');          form.addEventListener('submit', e => {       e.preventDefault();       obituary.classList.add('d-none');       shareBtn.classList.add('d-none');       loadingIndicator.style.display = 'block';       generateObituary(document.querySelector('#username').value);     });          function generateObituary(username) {       fetch('https://www.literallyanything.io/api/integrations/chatgpt', {         method: 'POST',         headers: {           'Content-Type': 'application/json'         },         body: JSON.stringify({           systemPrompt: 'Generate a humorous obituary for a Twitter user\'s Verified Check Mark which disappeared on 4/20/2023. If the twitter username is very popular, write something specific and funny about that user. Keep response to under 280 characters. Always append "✨Made with https://www.literallyanything.io/app/SvOwtDRw84LOyBhe4RN1"',           prompts: [             { role: 'user', content: `@${username}'s Verified Check Mark has passed away on 4/20/2023. Please generate a short and humorous obituary for it.` }           ]         })       })       .then(response => response.json())       .then(data => {         obituary.innerHTML = data.response;         obituary.classList.remove('d-none');         shareBtn.classList.remove('d-none');         loadingIndicator.style.display = 'none';       })       .catch(error => {         console.error('Error:', error);         obituary.innerHTML = 'Oops, something went wrong. Please try again later.';         obituary.classList.remove('d-none');         loadingIndicator.style.display = 'none';       });     }          shareBtn.addEventListener('click', e => {       e.preventDefault();       const obituaryText = encodeURIComponent(obituary.innerText);       const tweetUrl = `https://twitter.com/intent/tweet?text=${obituaryText}`;       window.open(tweetUrl, '_blank');     });   </script> </body> </html>

Generates humorous obituary for a Twitter user's Verified Check Mark which disappeared on 4/20/2023.