ImBenji/Quote-Generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement v2 API for stateful sessions and add engagement metrics support

Browse Source
This commit is contained in:
ImBenji
2026-01-02 00:45:14 +00:00
parent 48fce1564a
commit 48e6c7e3c1
7 changed files with 1325 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
template.html Normal file
View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.square-container {
width: calc(100vmin - 20px);
height: calc(100vmin - 20px);
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
overflow: hidden;
}
.tweet-container {
width: 450px;
background-color: #000;
padding: 12px 16px;
box-sizing: border-box;
}
.tweet-header {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 12px;
background: rgb(51, 54, 57);
}
.user-info {
display: flex;
flex-direction: column;
}
.display-name {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
font-weight: 700;
color: rgb(231, 233, 234);
line-height: 20px;
display: flex;
align-items: center;
gap: 4px;
}
.verified-badge {
width: 18px;
height: 18px;
fill: rgb(29, 155, 240);
}
.username {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
color: rgb(113, 118, 123);
line-height: 20px;
}
.tweet-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
color: rgb(231, 233, 234);
line-height: 20px;
margin-bottom: 12px;
white-space: pre-wrap;
}
.tweet-time {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
color: rgb(113, 118, 123);
}
.tweet-source {
color: rgb(29, 155, 240);
}
.engagement-bar {
display: flex;
justify-content: space-between;
padding: 12px 0;
margin-top: 12px;
border-top: 1px solid rgb(47, 51, 54);
}
.engagement-item {
display: flex;
align-items: center;
gap: 4px;
color: rgb(113, 118, 123);
}
.engagement-icon {
width: 18.75px;
height: 18.75px;
fill: rgb(113, 118, 123);
}
.engagement-count {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 13px;
color: rgb(113, 118, 123);
}
</style>
</head>
<body>
<div class="square-container">
<div class="tweet-container">
<div class="tweet-header">
<div class="avatar">{{avatarHtml}}</div>
<div class="user-info">
<span class="display-name">{{displayName}}{{verifiedBadge}}</span>
<span class="username">{{username}}</span>
</div>
</div>
<div class="tweet-text">{{text}}</div>
{{imageHtml}}
<div class="tweet-time">{{timestamp}} · <span class="tweet-source">via quotes.imbenji.net</span></div>
{{engagementHtml}}
</div>
</div>
<script>
function fitToSquare() {
const square = document.querySelector('.square-container');
const tweet = document.querySelector('.tweet-container');
const scaleX = square.offsetWidth / tweet.offsetWidth;
const scaleY = square.offsetHeight / tweet.offsetHeight;
const scale = Math.min(scaleX, scaleY) * 0.95;
tweet.style.transform = 'scale(' + scale + ')';
}
window.onload = fitToSquare;
</script>
</body>
</html>