Skip to content

Commit

Permalink
Create index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@AshokShau
AshokShau committed Oct 18, 2024
1 parent c9d8a19 commit 5f4d376
Showing 1 changed file with 387 additions and 0 deletions.
387 changes: 387 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,387 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Force Subscribe Bot</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<style>
body,
html {
margin: 0;
padding: 0;
}

body {
background-color: #1a202c;
color: #cbd5e0;
font-family: 'Roboto', sans-serif;
}

.container {
margin: 0 auto;
max-width: 800px;
}

.canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
}

.main-content {
background-color: #2d3748;
border: 1px solid #4a5568;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-top: 5rem;
filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
}

.error-message {
color: #f56565;
}

.btn-help {
background-color: #2d3748;
}

.btn-help:hover {
background-color: #2c5282;
color: rgb(250 204 21);
}

.btn-contact {
background-color: #2d3748;
}

.btn-contact:hover {
background-color: #2f855a;
color: rgb(250 204 21);
}

.btn-connect {
z-index: 2;
}

.spark {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
background: #2b6cb0;
z-index: 1;
align-self: center;
}

.spark:nth-child(even)
{
background: transparent;
border: 1px solid white;
}

@keyframes animate-spark {
0%
{
opacity: 1;
transform: translate(0, 0);
}
100%
{
opacity: 0;
transform: translate(var(--x), var(--y));
}
}
</style>
</head>

<body>
<div class="container mx-auto py-8">
<div class="flex justify-between items-center">
<div class="space-y-4 text-3xl h-max shadow-2xl rounded-lg font-bold text-yellow-400 hover:bg-gray-700">
<a href="https://github.com/AshokShau/BotApiDocs" target="_blank">
<span>BotApiDocs</span>
</a>
</div>
<div>
<a href="#setup">
<button type="button"
class="btn-help shadow-2xl rounded-md px-4 py-2 bg-blue-600 font-medium text-white hover:bg-blue-500">
Guide</button></a>
<a href="tg://resolve?domain=FallenAssociation">
<button type="button"
class="btn-contact shadow-2xl rounded-md px-4 py-2 bg-green-600 text-white font-medium hover:bg-green-500">
Contact</button></a>
<a href="https://github.com/AshokShau/BotApiDocs#telegram-bot-api-documentation-assistant">
<button type="button"
class="btn-contact shadow-2xl rounded-md px-4 py-2 bg-green-600 text-white font-medium hover:bg-green-500">
More</button></a>

</div>
</div>
<div id="mainContent" class="main-content mt-8">
<h1 class="text-2xl font-bold text-yellow-400 mb-4">Connect a New Bot</h1>
<div id="helpMessage" class="absolute mt-10 hidden bg-gray-700 text-white text-sm rounded py-2 px-4 z-10">
Go to <a href="tg://resolve?domain=botfather" class="text-blue-300">@botfather</a> and create a /newbot to obtain this.
</div>
<div class="flex flex-col space-y-4">
<div class="relative flex items-center">
<label for="botToken" class="text-xl mr-2">Enter your Bot Token</label>
<button id="helpButton" class="text-white rounded-full p-2 hover:bg-gray-700 focus:outline-none">ⓘ</button>
</div>

<div class="relative">
<span id="errorMessage" class="error-message text-sm mb-2 invisible"></span>
<input type="text" id="botToken"
class="rounded-md px-4 py-2 bg-gray-800 text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 placeholder-gray-400 w-full">
</div>
<div id="button-container" class="flex flex-col space-y-4">
<button type="button" id="connectButton"
class="btn-connect rounded-md shadow-2xl py-2 bg-blue-600 font-semibold text-white hover:bg-blue-500 text-gray-300">Connect</button>
</div>
</div>
</div>

<div class="guide mt-8 p-6 bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-mono text-yellow-400 mb-4 hover:underline focus:underline" id="setup">Setup</h2>
<ol class="list-decimal ml-6 mb-6">
<li class="mb-2">
Go to <a href="tg://resolve?domain=botfather" target="_blank" class="text-blue-400 hover:text-blue-300">BotFather</a> and create a new bot or choose an existing one.
</li>
<li class="mb-2">Copy the bot token and paste it into the <a href="#botToken" class="text-blue-400">input</a> above.</li>
<li class="mb-2">Click connect and your bot is all set up.</li>
</ol>

<h2 class="text-xl font-mono text-yellow-400 mb-4" id="usage">Usage</h2>
<ol class="list-decimal ml-6">
<li class="mb-2">Start a chat with your bot on Telegram. Once the bot is running, you can search for API methods and types..</li>
<li class="mb-2">Use the inline query feature by typing <code class="bg-gray-700 text-gray-100 p-1 rounded"> @YourBotUsername your_query</code> to search for methods or types.</li>
<li class="mb-2">You're all set!</li>
</ol>
</div>

</div>
<div class="canvas-container">
<canvas id="canvas"></canvas>
</div>
<script>
const connectButton = document.getElementById('connectButton');
const botTokenInput = document.getElementById('botToken');
const errorMessage = document.getElementById('errorMessage');
const mainContent = document.getElementById('mainContent');
const buttonContainer = document.getElementById('button-container');

connectButton.addEventListener('click', async () => {
for (let i = 0; i<30; i++) {
let spark = document.createElement('i');
spark.classList.add('spark')

// randomly position spark elements
const randomX = (Math.random() - 0.5) * window.innerWidth;
const randomY = (Math.random() - 0.5) * window.innerHeight;

spark.style.setProperty('--x', randomX + 'px')
spark.style.setProperty('--y', randomY + 'px')

// random size for sparks
const randomSize = Math.random() * 8 + 2;
spark.style.width = randomSize + 'px';
spark.style.height = randomSize + 'px';

// add animation to spark
const duration = Math.random() * 2 + 0.5;
spark.style.animation = `animate-spark ${duration}s ease-out forwards`;

buttonContainer.appendChild(spark);

// remove sparks after 2s
setTimeout(function() {
spark.remove();
}, 2000);
}
const botToken = botTokenInput.value.trim();
if (!botToken) {
showError('Bot token is required!');
return;
}

// Regex check the bot token first
if (!/^\d{5,}:\w{10,}/.test(botToken)) {
showError('Bot token is invalid!');
return;
}

// Clear previous error states
errorMessage.classList.add('invisible');
errorMessage.textContent = '';
botTokenInput.classList.remove('border-red-500');

// let currentUrl = window.location.origin;
// // Use default url if null
// if (currentUrl === 'null') {
// currentUrl = 'https://botapidocs.abishnoi.me/';
// }

const currentUrl = 'https://botapidocs.abishnoi.me/';
try {
const resp = await fetch('https://api.telegram.org/bot' + botToken + '/getme', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});

const getMe = await resp.json();

if (!getMe.ok) {
showError(getMe.description);
return;
}

const webhookUrl = `${currentUrl}/bot/${botToken}/${getMe.result.username}`;

const response = await fetch('https://api.telegram.org/bot' + botToken + '/setWebhook', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
url: webhookUrl,
drop_pending_updates: true,
allowed_updates: ['message', 'inline_query']
})
});

const data = await response.json();

if (data.ok) {
// Replace content with success message
mainContent.innerHTML = `
<div class="text-center">
<h1 class="text-4xl font-bold text-green-500 mb-4">Success 🎉</h1>
<p class="text-xl text-green-500">Bot Connected Successfully!</p>
<p class="text-base text-gray-400 mt-4">Customize Your bot from <a href='tg://resolve?domain=botfather&start=${getMe.result.username}' class='text-blue-400'>@botfather</a> to Add Your Personal Touch.</p>
</div>
`;
// Start confetti animation
startConfetti();
} else {
return showError(data.description);
}
} catch (error) {
console.error(error);
return showError('An error occurred!');
}
});

document.getElementById('helpButton').addEventListener('click', function() {
const helpMessage = document.getElementById('helpMessage');
helpMessage.classList.toggle('hidden');
});

document.addEventListener('click', function(event) {
const helpButton = document.getElementById('helpButton');
const helpMessage = document.getElementById('helpMessage');
if (!helpButton.contains(event.target) && !helpMessage.contains(event.target)) {
helpMessage.classList.add('hidden');
}
});

function showError(message) {
errorMessage.textContent = message;
errorMessage.classList.remove('invisible');
botTokenInput.classList.add('border-red-500');
}

function startConfetti() {
let W = window.innerWidth;
let H = window.innerHeight;
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const maxConfetti = 250; // Increase the number of confetti for denser effect
const particles = [];

const possibleColors = [
"Indigo",
"DarkBlue",
"DarkGoldenRod",
"Purple",
"Indigo",
];

canvas.width = W;
canvas.height = H;

function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}

function ConfettiParticle() {
this.x = Math.random() * W; // x
this.y = Math.random() * H - H; // y
this.r = randomFromTo(15, 15); // Smaller radius
this.d = Math.random() * maxConfetti + 5;
this.color = possibleColors[Math.floor(Math.random() * possibleColors.length)];
this.tilt = Math.floor(Math.random() * 33) - 11;
this.tiltAngleIncremental = Math.random() * 0.07 + 0.05;
this.tiltAngle = 0;

this.draw = function () {
context.beginPath();
context.lineWidth = this.r / 2;
context.strokeStyle = this.color;
context.moveTo(this.x + this.tilt + this.r / 3, this.y);
context.lineTo(this.x + this.tilt, this.y + this.tilt + this.r / 5);
return context.stroke();
};
}

function Draw() {
let i;
const results = [];

requestAnimationFrame(Draw);

context.clearRect(0, 0, W, window.innerHeight);

for (i = 0; i < maxConfetti; i++) {
results.push(particles[i].draw());
}

let particle = {};
let remainingFlakes = 0;
for (i = 0; i < maxConfetti; i++) {
particle = particles[i];

particle.tiltAngle += particle.tiltAngleIncremental;
particle.y += (Math.cos(particle.d) + 4 + particle.r / 2) / 1.5; // Fall quicker
particle.tilt = Math.sin(particle.tiltAngle - i / 3) * 15;

if (particle.y <= H) remainingFlakes++;

// if (particle.x > W + 30 || particle.x < -30 || particle.y > H) {
// particle.x = Math.random() * W;
// particle.y = -30;
// particle.tilt = Math.floor(Math.random() * 10) - 20;
// }
}
}

for (let i = 0; i < maxConfetti; i++) {
particles.push(new ConfettiParticle());
}

Draw();
}

</script>
</body>

</html>

0 comments on commit 5f4d376

Please sign in to comment.