-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
603 lines (549 loc) · 22.7 KB
/
index.html
File metadata and controls
603 lines (549 loc) · 22.7 KB
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./assets/images/splash.png" type="image/x-icon">
<title>Repromptt</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/responsive.css">
<style>
</style>
<!-- Add this in the <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<!--nav bar-->
<nav id="nav-bar" class="">
<div class="container nav flex">
<a href="index.html" class="logo"> <img src="./assets/images/splash.png" alt="icon"> <div>Repromptt</div></a>
<div id="nav-links" class="nav-links flex inactive">
<a class="nav-link" href="#hero">Home</a>
<a class="nav-link" href="#features">Features</a>
<a class="nav-link" href="#reviews">Reviews</a>
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#contact">Contact</a>
</div>
<i id="nav-toggle" class="fa-solid fa-bars"></i>
</div>
</nav>
<!--hero section-->
<section id="hero">
<div id="particles-js"></div>
<div class="container hero flex">
<div class="hero-text">
<h1 >RePromptt teaches you how to unlock the power of AI—no tech skills needed</h1>
<h4 style="font-style: italic;">Learn how to get more accurate, helpful replies from AI tools like ChatGPT, Gemini, and Copilot. No tech skills needed. Just ask.</h4>
<br>
<div class="hero-buttons flex">
<div style="display: flex; flex-direction: column; gap: 10px;">
<a href="https://apps.apple.com/us/app/repromptt/id6747834696" class="">
<img src="./assets/images/appstore.png" style="width:150px; height: auto; border-radius: 10px;">
</a>
<a href="https://play.google.com/store/apps/details?id=com.repromptt.repromptt">
<img src="./assets/images/playstore.png" style="width:150px; height: auto; border-radius: 10px;">
</a>
</div>
<a href="#" class="primary-btn play-btn shadow" id="playButton">
<i class="fa-solid fa-play"></i>
</a>
</div>
</div>
<div class="hero-img">
<img class="screenshot" src="./assets/images/heromain1.png" alt="App Screenshot" style="width: 400px; border-radius: 40px;">
<!-- <div class="hero-orbit"><div class="hero-orbit-box"></div></div> -->
</div>
<!--animation icons-->
<i class="fa-solid fa-plus plus1"></i>
<i class="fa-solid fa-plus plus2"></i>
<i class="fa-solid fa-circle-notch"></i>
</div>
</section>
<div id="videoModal" class="modal" style="display:none;">
<div class="modal-content" style="margin-top: 20vh;">
<span class="close-btn">×</span>
<iframe id="youtubeVideo"
src="https://www.youtube.com/embed/_jHKmhX6mfU?enablejsapi=1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<!--features-->
<section id="features">
<div class="container features">
<h2>Unique <span class="primary-color">Features</span></h2>
<div class="feature-cards flex">
<div class="feature-card card flex shadow">
<i class="fa-solid fa-pen-to-square"></i>
<h3>Rewrite This Prompt</h3>
<p>Craft the best version of your question.
Get clearer answers and better results in any AI platform, instantly.
</p>
</div>
<div class="feature-card card flex shadow">
<i class="fa-solid fa-paintbrush"></i>
<h3>Learn From Every Rewrite</h3>
<p>Understand what works—and why.
We break down how your question was improved, so you get smarter with every use.
</p>
</div>
<div class="feature-card card flex shadow">
<i class="fa-solid fa-code"></i>
<h3>Use With Any AI</h3>
<p>Copy, paste, done.
Send your optimized prompt to ChatGPT, Gemini, Copilot, with ease.</p>
</div>
</div>
</div>
</section>
<!--facts-->
<!-- <section id="facts" class="light-blue-bg">
<div class="container facts flex">
<div class="img">
<img class="screenshot" src="./assets/images/app screenshots/2.png" alt="app screenshot">
</div>
<div class="facts-text">
<h2>Fun <span class="primary-color">Facts</span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quo veritatis accusamus rem commodi provident rerum est qui modi quis quaerat eveniet, numquam.</p>
<div class="facts-cards flex">
<div class="facts-card card flex">
<h3>4000</h3>
<p>Downloads</p>
</div>
<div class="facts-card card flex">
<h3>200</h3>
<p>Likes</p>
</div>
<div class="facts-card card flex">
<h3>500</h3>
<p>5 Star Ratings</p>
</div>
<div class="facts-card card flex">
<h3>150</h3>
<p>Awards</p>
</div>
</div>
</div>
</div>
</section> -->
<!-- app screenshots -->
<section id="app-sc">
<div class="container app-sc">
<h2>See <span class="primary-color">The Difference</span></h2>
<div class="usecase">
<div style="padding: 40px;">
<h4 style="text-shadow: none;">Typical AI Response</h4>
<p>
Standard prompts often result in vague, inaccurate, or even misleading answers from others AI. In the example here, the AI struggled to understand the intent and produced an unsatisfactory response.
</p>
</div>
<img class="screenshot" src="./assets/images/app screenshots/1.png" alt="Normal ChatGPT Screenshot">
</div>
<div class="usecase">
<img class="screenshot" src="./assets/images/app screenshots/2.png" alt="RePromptt Screenshot 1">
<img class="screenshot sc-3" src="./assets/images/app screenshots/3.png" alt="RePromptt Screenshot 2">
<div style="padding: 20px;">
<h4 style="text-shadow: none;">Optimized With RePromptt</h4>
<p>
RePromptt helps you craft precise and powerful prompts with just one tap. Instantly improve clarity, accuracy, and depth of AI responses—whether you're using ChatGPT, Gemini, Copilot, or others. It’s like upgrading your prompt to a pro version—effortlessly.
</p>
</div>
</div>
</div>
</section>
<!-- download app -->
<section id="download">
<div class="container download">
<h2>Download <span class="primary-color">App</span></h2>
<div class="download-cards flex">
<div class="download-card card shadow flex">
<i class="fa-brands fa-google-play primary-color"></i>
<h3>Google Play</h3>
<a class="primary-btn shadow" href="https://play.google.com/store/apps/details?id=com.repromptt.repromptt">Download</a>
</div>
<div class="download-card card shadow flex">
<i class="fa-brands fa-apple primary-color"></i>
<h3>Apple Store</h3>
<a class="primary-btn shadow" href="https://apps.apple.com/us/app/repromptt/id6747834696">Download</a>
</div>
</div>
</div>
</section>
<!-- how it works(steps) -->
<section id="steps">
<div class="container steps">
<h2>How it <span class="primary-color">Works</span></h2>
<div class="steps-cards flex">
<div class="card flex shadow">
<div class="step-no flex">1</div>
<h4 style="text-shadow: none;">Free Download</h4>
<p>Get it now from your app store and start instantly</p>
</div>
<div class="card flex shadow">
<div class="step-no flex">2</div>
<h4 style="text-shadow: none;">Write Smarter Prompts</h4>
<p>Use one-tap editor to refine, learn, and apply.</p>
</div>
<div class="card flex shadow">
<div class="step-no flex">3</div>
<h4 style="text-shadow: none;">Search with Top AIs</h4>
<p>Link easily to ChatGPT and Copilot.</p>
</div>
<div class="card flex shadow">
<div class="step-no flex">4</div>
<h4 style="text-shadow: none;">Unlock Pro Access</h4>
<p>Go PRO for unlimited use and deeper AI insights.</p>
</div>
</div>
</div>
</section>
<!-- what our client say(reviews) -->
<section id="reviews" class="light-blue-bg">
<div class="container reviews">
<h2>What Our <span class="primary-color">Users</span> Say</h2>
<div class="reviews-cards flex">
<div class="card flex shadow">
<!-- <div class="img">
<img src="./assets/images/testimonials/1.jpg" alt="reviewer profile image">
</div> -->
<p>"I asked RePromptt where to find the best Chinese food nearby—got an answer and a link in seconds!"</p>
<h4>Sarah Mitchell</h4>
<p class="designation"> New York, NY</p>
<div class="ratings">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<div class="card flex shadow">
<!-- <div class="img">
<img src="./assets/images/testimonials/2.jpg" alt="reviewer profile image">
</div> -->
<p>Needed a quick way to rewrite my email professionally—RePromptt nailed it in one go</p>
<h4>Jason Clark</h4>
<p class="designation">Austin, TX</p>
<div class="ratings">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<div class="card flex shadow">
<!-- <div class="img">
<img src="./assets/images/testimonials/3.jpg" alt="reviewer profile image">
</div> -->
<p>Was struggling to summarize a long article. RePromptt gave me a perfect prompt instantly.</p>
<h4>Emily Rogers</h4>
<p class="designation">San Francisco, CA</p>
<div class="ratings">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
</div>
</section>
<!-- pricing plan -->
<section id="pricing">
<div class="container pricing">
<h2>Pricing <span class="primary-color">Plan</span></h2>
<div class="pricing-cards flex">
<div class="card shadow" style="height: 400px; ">
<h3 style="padding: 10px;">Basic</h3>
<hr>
<div class="card-body flex">
<div class="price flex">
<span class="dollar">$</span>
<span class="amt">Free</span>
<span class="monthly">/Monthly</span>
</div>
<ul>
<li><i class="fa-solid fa-check"></i> 3 Prompts / Day</li><hr>
<li><i class="fa-solid fa-check"></i> Basic Feedback & Learning</li><hr>
<li><i class="fa-solid fa-check"></i> Access to Community Support</li><hr>
</ul>
<a href="#download" class="primary-btn shadow hover">Try It Free</a>
</div>
</div>
<div class="card shadow" style="height: 400px; ">
<h3 style="padding: 10px;">Premium</h3>
<hr>
<div class="card-body flex">
<div class="price flex">
<span class="dollar">$</span>
<span class="amt">11.99</span>
<span class="monthly">/Monthly</span>
</div>
<ul>
<li><i class="fa-solid fa-check"></i> Unlimited Prompts</li><hr>
<li><i class="fa-solid fa-check"></i> Advanced Feedback & Learning</li><hr>
<li><i class="fa-solid fa-check"></i> Priority Support & Features</li><hr>
</ul>
<a href="#download" class="primary-btn shadow hover">Know More</a>
</div>
</div>
</div>
</div>
</section>
<!-- team members -->
<!-- frequently asked Quesion -->
<!-- <section id="faq">
<div class="container faq">
<h2>Frequently <span class="primary-color">Asked</span> Question</h2>
<ul class="fa-ques flex">
<li class="shadow">100% responsive - fits any device perfectly</li>
<li class="shadow">clean code</li>
<li class="shadow">flat,modern and clean design.</li>
<li class="shadow">custom font support</li>
<li class="shadow">Hosting Price ?</li>
</ul>
</div>
</section> -->
<!-- Contact Details -->
<section id="contact" class="light-blue-bg">
<div class="container contact">
<h2>Why <span class="primary-color">Repromptt</span></h2>
<div class="contact-det-form flex">
<div class="contact-details">
<h3 style="color: #7e51fc;"></h3>
<p>RePromptt was born out of a desire to help my 84-year-old mother and 11-year-old nephew unlock the power of AI through better prompts. Seeing their struggles with vague AI responses inspired us to build a simple tool that refines prompts and provides clear, educational feedback, making AI a friend to all ages.</p>
</br>
</br>
<div class="contact-details">
<h3 style="color: #7e51fc;">About Us</h3>
<p>We are a passionate team dedicated to making AI accessible to everyone, with a focus on bridging the generational gap. Our mission began with a personal challenge to empower our loved ones with technology, leading to the creation of RePromptt.</p>
</br>
<div class="location flex">
<div class="contact-details-icon">
<i class="fa-solid fa-envelope"></i>
</div>
<div class="company-location">
<p>Write us at</p>
<p class="designation">support@repromptt.com</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About us -->
<footer id="about-us">
<div class="container about-us">
<div class="page-links flex">
<div class="link-column flex">
<h4>Legals</h4>
<a href="#pricing">Pricing</a>
<a href="./delete_account.md"> Accounts Policy</a>
<a href="./privacy_policy.md"> Privacy Policy</a>
<a href="https://stripe.com/privacy">Subscription policy</a>
<a href="mailto:support@repromptt.com"><i class="fas fa-headset"></i> Help Center</a>
<a href="mailto:shriharshranjangupta@gmail.com">Dev Support</a>
</div>
<div class="link-column flex">
<h4>Socials</h4>
<a href="https://www.facebook.com/profile.php?id=61577897312463"><i class="fab fa-facebook-f"></i> Facebook</a>
<a href="https://www.instagram.com/repromptt/"><i class="fab fa-instagram"></i> Instagram</a>
<a href="https://x.com/repromptt"><i class="fab fa-x-twitter"></i> X.com</a>
<a href="https://github.com/orgs/Repromptt/"><i class="fab fa-github"></i> Github</a>
<a href="https://www.linkedin.com/company/repromptt"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
<a href="https://www.youtube.com/@Repromptt"><i class="fab fa-youtube"></i> YouTube</a>
</div>
<div class="link-column flex">
<h4>Downloads</h4>
<a href="https://play.google.com/store/apps/details?id=com.repromptt.repromptt">
<img src="./assets/images/playstore.png" style="width:100px; height: auto; border-radius: 10px;">
</a>
<a href="https://apps.apple.com/us/app/repromptt/id6747834696">
<img src="./assets/images/appstore.png" style="width:100px; height: auto; border-radius: 10px;">
</a>
</div>
</div>
<hr>
<div class="copyright">
<p>© 2025 Repromptt. All rights reserved.
</div>
</div>
</footer>
<!--font awesome kits-->
<script src="https://kit.fontawesome.com/a1e2de8d6c.js" crossorigin="anonymous"></script>
<!-- hamburger(toggle bar) script-->
<script id="js">
const toggleBtn = document.getElementById("nav-toggle");
const navLinks = document.getElementById("nav-links");
//hamburger menu on click
toggleBtn.addEventListener('click',()=>{
navLinks.classList.toggle("inactive");
})
//shadow under nav while scrollY>0
let stick = () => {
let navbar = document.querySelector("nav");
if (window.scrollY > 0) {
navbar.classList.add("scroll-shadow");
} else {
navbar.classList.remove("scroll-shadow");
}
}
window.addEventListener('scroll', stick);
</script>
<style>
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.modal-content {
position: relative;
margin: 10% auto;
padding: 0;
width: 90%;
max-width: 640px;
background: #000;
border-radius: 8px;
}
video {
width: 100%;
border-radius: 8px;
display: block;
}
.close-btn {
position: absolute;
top: 10px;
right: 16px;
font-size: 28px;
color: white;
cursor: pointer;
}
.close-btn:hover {
color: #ccc;
}
</style>
<!-- JS -->
<script>
const playButton = document.getElementById("playButton");
const modal = document.getElementById("videoModal");
const closeBtn = document.querySelector(".close-btn");
const video = document.getElementById("youtubeVideo");
// Open modal and autoplay video
playButton.addEventListener("click", function (e) {
e.preventDefault();
modal.style.display = "block";
video.contentWindow.postMessage(
'{"event":"command","func":"playVideo","args":""}',
"*"
);
});
// Close modal and stop video
closeBtn.addEventListener("click", function () {
modal.style.display = "none";
video.contentWindow.postMessage(
'{"event":"command","func":"stopVideo","args":""}',
"*"
);
});
// Close when clicking outside modal
window.addEventListener("click", function (e) {
if (e.target === modal) {
modal.style.display = "none";
video.contentWindow.postMessage(
'{"event":"command","func":"stopVideo","args":""}',
"*"
);
}
});
</script>
<script>
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": { "value": "#ffffff" },
"shape": {
"type": "circle",
"stroke": { "width": 0, "color": "#000000" },
"polygon": { "nb_sides": 5 },
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": { "enable": false }
},
"size": {
"value": 3,
"random": true,
"anim": { "enable": false }
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": { "enable": true, "mode": "repulse" },
"onclick": { "enable": true, "mode": "push" },
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": { "opacity": 1 }
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": { "particles_nb": 4 },
"remove": { "particles_nb": 2 }
}
},
"retina_detect": true
});
</script>
</body>
</html>