<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>HeadshotsPro Twitter Widget</title>

        <meta name="description" content="A modern and stylish widget that shows a sample of the last several tweets by @Headshotspro on Twitter.">

        <meta name="keywords" content="twitter, widget, tweets, headshotspro">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <script type="text/javascript">

            try {

                // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

                document.addEventListener("DOMContentLoaded", function() {

                    // Fetch the tweets from Twitter API

                    $.ajax({

                        url: 'https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=Headshotspro&count=5',

                        dataType: 'jsonp',

                        success: function(data) {

                            var tweets = data;

                            var container = document.getElementById('tweets-container');



                            // Iterate through the tweets and create HTML elements to display them

                            for (var i = 0; i < tweets.length; i++) {

                                var tweet = tweets[i];

                                var tweetElement = document.createElement('div');

                                tweetElement.className = 'tweet';



                                var date = new Date(tweet.created_at);

                                var formattedDate = date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });

                                var formattedTime = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });



                                var html = `

                                    <div class="tweet-header">

                                        <img src="${tweet.user.profile_image_url}" class="profile-image">

                                        <div class="tweet-info">

                                            <div class="tweet-username">${tweet.user.name}</div>

                                            <div class="tweet-date">${formattedDate} at ${formattedTime}</div>

                                        </div>

                                    </div>

                                    <div class="tweet-content">${tweet.text}</div>

                                `;



                                tweetElement.innerHTML = html;

                                container.appendChild(tweetElement);

                            }

                        }

                    });

                });



            } catch (error) {

                 // This will throw the error to the parent window.

                throw error;

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            body {

                font-family: 'Roboto', sans-serif;

                background-color: #f8f8f8;

                margin: 0;

                padding: 0;

            }



            #main-container {

                max-width: 600px;

                margin: 20px auto;

                padding: 20px;

                background-color: #ffffff;

                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            }



            .tweet {

                margin-bottom: 20px;

                padding-bottom: 20px;

                border-bottom: 1px solid #eeeeee;

            }



            .tweet:last-child {

                border-bottom: none;

                padding-bottom: 0;

            }



            .tweet-header {

                display: flex;

                align-items: center;

                margin-bottom: 10px;

            }



            .profile-image {

                width: 40px;

                height: 40px;

                border-radius: 50%;

                margin-right: 10px;

            }



            .tweet-info {

                display: flex;

                flex-direction: column;

                justify-content: center;

            }



            .tweet-username {

                font-weight: bold;

            }



            .tweet-date {

                color: #888888;

                font-size: 12px;

            }



            .tweet-content {

                font-size: 14px;

                line-height: 1.5;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h2>HeadshotsPro Twitter Widget</h2>

            <div id="tweets-container"></div>

        </div>

    </body>

</html>