PikiDiary_Widgetcode

Copy the HTML code below (replace all instances of "PlaceholderUsername" with your own username):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PikiDiary Widget</title>
    <style>
        body {
            font-family: MS PGothic, sans-serif;
            background-color: #ffffff;
            margin: 0;
            padding: 20px;
        }
        a {
	color: #3F7BAC;
}

.widget-container {
            max-width: 500px;
            margin: 0 auto;
            background-color: #fff;
            overflow: hidden;
        }

.widget-header {
            background-color: #fff;
            color: #000;
            padding: 10px 20px;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            border-bottom: #407cac;
        }

.post {
            border-bottom: 1px solid #ddd;
            padding: 4px;
            background-color:#F2F2F2
        }

.post:last-child {
            border-bottom: none;
        }

.post-content {
            font-size: 1em;
            margin-bottom: 10px;
        }

.post-timestamp {
            font-size: 0.85em;
            color: #666;
        }
    </style>
</head>
<body>

<div class="widget-container">
        <div class="widget-header">My PikiDiary Posts</div>
        <div id="posts-container">
            
        </div>
    </div>

data.forEach(post => {
                    // Create a post element
                    const postElement = document.createElement('div');
                    postElement.classList.add('post');

// Add content to the post element
                    postElement.innerHTML = `
                        <div class="post-content">${post.content}</div>
                        <div class="post-timestamp">${post.created_at}</div>
                    `;

// Append the post element to the container
                    postsContainer.appendChild(postElement);
                });
            })
            .catch(error => console.error('Error fetching posts:', error));
    </script>

<p class="post-content">Follow PlaceholderUsername on PikiDiary at
	<a href="https://pikidiary.lol/@PlaceholderUsername">pikidiary.lol/@PlaceholderUsername</a>!</p>

</body>
</html>

Preview:

Your browser does not support inline frames or is currently configured not to display inline frames.