In this episode, we’ll learn how to build an app to generate Tweets and automate your Twitter account using Open AI.
HTML Tweet Template
<link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
{{#each records}}
<div class="tweet-wrap">
<div class="tweet-status">
<p class="{{field_43}}">{{field_43}}</p>
</div>
<div class="tweet-header">
<img src="https://8232-application-data-2273.s3.amazonaws.com/awrRMZBj5k/1670511619-TGVFXJ6LA-U01JNP88NE4-73916082c5ab-512.png" alt="" class="avator">
<div class="tweet-header-info">
Tim Young <span>@TimYoun66083487</span><span> • {{formatDate field_41 '%b %e'}}
</span>
<p>{{field_40}}</p>
</div>
</div>
<div class="tweet-img-wrap">
<img src="{{field_46}}" alt="" class="tweet-img">
</div>
<div class="tweet-info-counts">
<div class="comments">
<svg class="feather feather-message-circle sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20"
height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
</path>
</svg>
<div class="comment-count">33</div>
</div>
<div class="retweets">
<svg class="feather feather-repeat sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<polyline points="17 1 21 5 17 9"></polyline>
<path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
<polyline points="7 23 3 19 7 15"></polyline>
<path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
</svg>
<div class="retweet-count">397</div>
</div>
<div class="likes">
<svg class="feather feather-heart sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
<div class="likes-count">
2.6k
</div>
</div>
<div class="message">
<svg class="feather feather-send sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</div>
</div>
<div class="tweet-buttons">
<div class="button-group">
<div>{{tb_link this tb-id="1" tb-value="Edit/Publish Tweet" tb-open-popup="1" class="btn btn-primary"}}</div>
<div>{{tb_link this tb-id="2" class="btn btn-danger"}}</div>
</div>
</div>
</div>
{{/each}}
CSS Tweet Template
.tweet-status {
text-align: right;
position: relative;
top: -35px;
right: -45px;
}
.tweet-status .Unsent {
background-color: #CD574C;
display: inline;
padding: 3px 12px;
border-radius: 5px;
color: #fff;
}
.tweet-status .Sent {
background-color: #5E8D6E;
display: inline;
padding: 3px 12px;
border-radius: 5px;
color: #fff;
}
.tweet-buttons {
margin-left: 60px;
}
.button-group {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 15px;
}
.button-group div {
margin-right: 25px;
}
.button-group .btn {
text-align: center;
}
img {
max-width:100%;
}
.avator {
border-radius:100px;
width:48px;
margin-right: 15px;
}
.tweet-wrap {
max-width:490px;
background: #fff;
margin: 0 auto;
margin-top: 35px;
border-radius:3px;
padding: 30px;
border-bottom: 1px solid #e6ecf0;
border-top: 1px solid #e6ecf0;
}
.tweet-header {
display: flex;
align-items:flex-start;
font-size:14px;
}
.tweet-header-info {
font-weight:bold;
}
.tweet-header-info span {
color:#657786;
font-weight:normal;
margin-left: 5px;
}
.tweet-header-info p {
font-weight:normal;
margin-top: 5px;
}
.tweet-img-wrap {
padding-left: 60px;
}
.tweet-img-wrap img {
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 10px;
}
.tweet-info-counts {
display: flex;
margin-left: 60px;
margin-top: 10px;
}
.tweet-info-counts div {
display: flex;
margin-right: 20px;
}
.tweet-info-counts div svg {
color:#657786;
margin-right: 10px;
}
@media screen and (max-width:430px){
.tweet-header {
flex-direction:column;
}
.tweet-header img {
margin-bottom: 20px;
}
.tweet-header-info p {
margin-bottom: 30px;
}
.tweet-img-wrap {
padding-left: 0;
}
.tweet-info-counts {
display: flex;
margin-left: 0;
}
.tweet-info-counts div {
margin-right: 10px;
}
}