-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathwelcome.html
166 lines (160 loc) · 9.62 KB
/
welcome.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>
XReplyGPT, Generate Twitter reply using chatGPT
</title>
<link rel="icon" href="images/XReplyGPT.png" type="image/x-icon" />
<meta name="description" content="Generate automatic replies on Twitter using ChatGPT to increase engagement and impressions." />
<meta name="keywords" content="XReplyGPT, ChatGPT, AI, Twitter, automatic replies, engagement, impressions" />
<meta name="author" content="Marc-Olivier Bouchard" />
<meta name="google-site-verification" content="4hImT8P4CFzK9uuplQJBw8dd6ZT8nUfXz4CYR44Nqe8" />
<meta name="twitter:card" content="summary">
<meta name="og:title" property="og:title" content="XReplyGPT, Generate Twitter reply using chatGPT">
<meta name="og:description" content="Generate reply using ChatGPT in Twitter/X to increase impressions and engagement." />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/>
<!--Replace with your tailwind.css once created-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
<!-- Define your gradient here - use online tools to find a gradient matching your branding-->
<style>
.gradient {
background: linear-gradient(90deg, blue 0%, lightblue 100%);
}
</style>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V3VH1X3WL1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-V3VH1X3WL1');
</script>
<body class="leading-normal tracking-normal text-white gradient" style="font-family: 'Source Sans Pro', sans-serif;">
<!--Nav-->
<nav id="header" class="w-full z-30 top-0 text-white">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2">
<div class="pl-4 flex items-center">
<a class="toggleColour text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="https://chrome.google.com/webstore/detail/xreplygpt/ajjgpcaiofpdenhkmabcadabajmimpdk" target="_blank">
XReplyGPT
</a>
</div>
</div>
<hr class="border-b border-gray-100 opacity-25 my-0 py-0" />
</nav>
<!--Hero-->
<section class="bg-white border-b py-8">
<div class="container max-w-5xl mx-auto m-8">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Welcome to XReplyGPT!
</h2>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="flex flex-wrap">
<div class="p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
How to Set Up XReplyGPT
</h3>
<p class="text-gray-600 mb-4">
Thank you for choosing XReplyGPT! To get started, follow these steps:
</p>
<p class="text-gray-700">1. Create an OpenAI API key <a href="https://platform.openai.com/account/api-keys"
target="_blank" class="underline">here</a>. Make sure you have a paid account or it won't work.</p>
<p class="text-gray-700">2. Save it in XReplyGPT in the config section. </p>
<p class="text-gray-700">3. Open <a class="underline" href="https://x.com" target="_blank">https://x.com</a>.</p>
<p class="text-gray-700">4. Press the shortcut "Generate reply for tweets".</p>
<p class="text-gray-700">5. Click on the generated reply to send it.</p>
</div>
</div>
<div class="flex flex-wrap">
<div class="p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Check out our YouTube Video!
</h3>
<div class="aspect-w-16 aspect-h-9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/nJZ6UyEtyjU?si=gO4DwiYoMqEvIq8d" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row">
<div class="w-full p-6 mt-6">
<div class="align-middle">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Need Help or Have Questions?
</h3>
<p class="text-gray-600 mb-8">
If you need assistance or have any questions about using XReplyGPT, you can request support directly in the Chrome marketplace <a href="https://chrome.google.com/webstore/detail/xreplygpt/ajjgpcaiofpdenhkmabcadabajmimpdk/support" class="underline">here</a> or by opening a <a href="https://github.com/marcolivierbouch/XReplyGPT/issues" class="underline">Github issue</a>. Our support team will be happy to assist you.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Change the colour #f8fafc to match the previous section colour -->
<svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
<g class="wave" fill="#f8fafc">
<path
d="M1440,84 C1383.555,64.3 1342.555,51.3 1317,45 C1259.5,30.824 1206.707,25.526 1169,22 C1129.711,18.326 1044.426,18.475 980,22 C954.25,23.409 922.25,26.742 884,32 C845.122,37.787 818.455,42.121 804,45 C776.833,50.41 728.136,61.77 713,65 C660.023,76.309 621.544,87.729 584,94 C517.525,105.104 484.525,106.438 429,108 C379.49,106.484 342.823,104.484 319,102 C278.571,97.783 231.737,88.736 205,84 C154.629,75.076 86.296,57.743 0,32 L0,0 L1440,0 L1440,84 Z"
></path>
</g>
<g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
<g transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) ">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" opacity="0.200000003"></path>
</g>
</g>
</g>
</g>
</svg>
<section class="container mx-auto text-center py-6 mb-12">
<div class="flex flex-col items-center justify-center h-full">
<h2 class="text-5xl font-bold leading-tight text-white">
Give us a review
</h2>
<div class="h-1 bg-white w-1/6 opacity-25 my-4 rounded"></div>
<button class="hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
<a href="https://chrome.google.com/webstore/detail/xreplygpt/ajjgpcaiofpdenhkmabcadabajmimpdk/review" target="_blank">
<img src="images/chrome.png" alt="Chrome Logo" class="inline-block h-6 w-6 mr-2">
Chrome store review page
</a>
</button>
</div>
</section>
<!--Footer-->
<footer class="bg-white bottom-0 w-full">
<div class="container mx-auto px-8">
<div class="w-full flex flex-col md:flex-row py-6">
<div class="flex-1 mb-6 text-black">
<div class="flex-1 mb-6 text-black">
<img src="images/XReplyGPT.png" alt="XReplyGPT Logo" class="inline-block h-16 w-16 pb-2 mr-2">
<a class="text-gray-500 no-underline hover:no-underline font-bold text-4xl" target="_blank" href="https://chrome.google.com/webstore/detail/xreplygpt/ajjgpcaiofpdenhkmabcadabajmimpdk">
XReplyGPT
</a>
</div>
</div>
<div class="flex-1">
<p class="uppercase text-gray-500 md:mb-6">Links</p>
<ul class="list-reset mb-6">
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a target="_blank" href="https://github.com/marcolivierbouch/XReplyGPT" class="no-underline hover:underline text-gray-800 hover:text-blue-500">Github</a>
</li>
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
<a target="_blank" href="https://chrome.google.com/webstore/detail/xreplygpt/ajjgpcaiofpdenhkmabcadabajmimpdk" class="no-underline hover:underline text-gray-800 hover:text-blue-500">Chrome store</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>