Mypc / pair.html
gaveshvimanshan's picture
Create pair.html
d158022 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VIMA MD BOT </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-size: cover;
background-position: center;
transition: 1s;
}
/* DARK PURPLE OVERLAY */
body::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(30, 0, 40, 0.8));
}
/* CARD */
.container {
position: relative;
z-index: 2;
}
.card {
width: 360px;
padding: 28px 22px;
border-radius: 20px;
/* GLASS LOOK */
background: rgba(128, 0, 128, 0.08);
backdrop-filter: blur(20px);
border: 1px solid rgba(128, 0, 128, 0.25);
box-shadow: 0 0 40px rgba(128, 0, 128, 0.35);
text-align: center;
}
/* TITLE */
.card h2 {
color: #d800ff;
text-shadow: 0 0 15px #9900ff;
}
/* TEXT */
.card p {
color: #aaa;
font-size: 13px;
}
/* INPUT */
.input-box {
margin-top: 18px;
display: flex;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 15px rgba(128, 0, 128, 0.3);
}
.input-box input {
flex: 1;
padding: 12px;
border: none;
outline: none;
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.input-box button {
padding: 12px 16px;
border: none;
background: linear-gradient(135deg, #9900ff, #4b0082);
color: #fff;
font-weight: bold;
cursor: pointer;
}
/* OUTPUT GLASS */
#pair {
margin-top: 18px;
color: #fff;
font-weight: bold;
}
#copy {
backdrop-filter: blur(15px);
background: rgba(128, 0, 128, 0.15);
padding: 8px 12px;
border-radius: 10px;
border: 1px solid rgba(128, 0, 128, 0.3);
}
.shape {
position: absolute;
border: 2px solid rgba(216, 0, 255, 0.4);
box-shadow: 0 0 10px rgba(153, 0, 255, 0.5), inset 0 0 10px rgba(153, 0, 255, 0.5);
background: transparent;
animation: floatShape linear infinite;
}
@keyframes floatShape {
0% {
transform: translateY(110vh) rotate(0deg) scale(0.5);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-10vh) rotate(360deg) scale(1.5);
opacity: 0;
}
}
/* SOUND BUTTON */
.sound-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(128, 0, 128, 0.8);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px #9900ff;
}
.sound-btn i {
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>VIMA MD</h2>
<br>
<h6>PAIR YOUR BOT WITH GAVESH VIMANSHNA </h6>
<p>PLEACE ENTER THE NUMBER</p>
<p>without the ( + ) mark</p>
<div class="input-box">
<input type="number" id="number" placeholder="9477xxxxxxx">
<button id="submit">ENTER</button>
</div>
<div id="pair"></div>
<p>powered by © VIMA HOSTING BOT || GAVESH VIMANSHNA 🍃</p>
</div>
</div>
<div class="sound-btn" id="soundBtn">
<i class="fas fa-volume-mute" id="soundIcon"></i>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>
<script>
const a = document.getElementById("pair");
const b = document.getElementById("submit");
const c = document.getElementById("number");
/* SAME LOGIC - NOT CHANGED */
async function Copy() {
let obj = document.getElementById("copy");
await navigator.clipboard.writeText(obj.innerText.replace('CODE: ', ''));
obj.innerText = "COPIED";
setTimeout(() => location.reload(), 1000);
}
b.addEventListener("click", async (e) => {
e.preventDefault();
if (!c.value) {
a.innerHTML = "Enter your WhatsApp number";
return;
}
const number = c.value.replace(/[^0-9]/g, "");
if (number.length < 11) {
a.innerHTML = "<span style='color:#ff00ff;'>Invalid Number</span>";
return;
}
c.value = "+" + number;
a.innerHTML = "Please wait...";
try {
let { data } = await axios(`/code?number=${number}`);
let code = data.code || "Service Unavailable";
a.innerHTML = `
<div id="copy" onclick="Copy()">
CODE: <span style="color:#d800ff;">${code}</span>
</div>
`;
} catch (err) {
a.innerHTML = "<span style='color:#ff00ff;'>Error fetching code</span>";
}
});
/* RANDOM ANIME BG */
const images = [
"https://cloud.laksidunimsara.com/f/Gavesh/1776071493689-file_00000000701071fa87d20f48721f618c.png"
];
function changeBg() {
const img = images[Math.floor(Math.random() * images.length)];
document.body.style.backgroundImage = `url(${img})`;
}
changeBg();
setInterval(changeBg, 5000);
/* FLOAT SHAPES */
for (let i = 0; i < 30; i++) {
const shape = document.createElement("div");
shape.classList.add("shape");
shape.style.left = Math.random() * 100 + "vw";
const size = 10 + Math.random() * 30;
shape.style.width = size + "px";
shape.style.height = size + "px";
shape.style.animationDuration = (8 + Math.random() * 10) + "s";
shape.style.animationDelay = (Math.random() * 5) + "s";
if (Math.random() > 0.5) shape.style.borderRadius = "50%";
document.body.appendChild(shape);
}
</script>
</body>
</html>