136 lines
4.1 KiB
HTML
136 lines
4.1 KiB
HTML
<!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> |