Bmb-Session/pair.html at main · novaxmd/Bmb-Session · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>B.M.B-TECH PAIR</title>
  <style>
    /* (====== CSS yako ile ile nimeiacha bila kubadilisha ======) */
    * {box-sizing: border-box;margin: 0;padding: 0;}
    body {
      background: linear-gradient(135deg, #0f0f0f, #1a1a1a, #000000);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      min-height: 100vh;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      position: relative;
      overflow-x: hidden;
    }
    .background-effects {position: fixed;top: 0; left: 0; width: 100%; height: 100%;z-index: -1;pointer-events: none;}
    .shape {position: absolute;background: rgba(0, 255, 153, 0.05);border: 1px solid rgba(0, 255, 153, 0.1);animation: roam 25s infinite ease-in-out;will-change: transform;}
    .square { width: 60px; height: 60px; }
    .circle { width: 50px; height: 50px; border-radius: 50%; }
    .triangle {width: 0; height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 50px solid rgba(0,255,153,0.05);}
    .shape:nth-child(1) { top: 10%; left: 5%; animation-duration: 20s; }
    .shape:nth-child(2) { top: 50%; left: 20%; animation-duration: 25s; }
    .shape:nth-child(3) { top: 30%; left: 60%; animation-duration: 22s; }
    .shape:nth-child(4) { top: 70%; left: 40%; animation-duration: 28s; }
    @keyframes roam {0% { transform: translate(0, 0) rotate(0deg); }25% { transform: translate(30vw, 20vh) rotate(90deg); }50% { transform: translate(-25vw, -25vh) rotate(180deg); }75% { transform: translate(20vw, 30vh) rotate(270deg); }100% { transform: translate(0, 0) rotate(360deg); }}
    .star {position: absolute;background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 10%, rgba(0, 255, 153, 0.2) 50%, transparent 70%);border-radius: 50%;animation: twinkle 4s infinite ease-in-out;will-change: opacity, transform;}
    .star:nth-child(5) { top: 15%; left: 25%; width: 3px; height: 3px; animation-delay: 0s; }
    .star:nth-child(6) { top: 55%; left: 45%; width: 2px; height: 2px; animation-delay: 1s; }
    .star:nth-child(7) { top: 75%; left: 65%; width: 4px; height: 4px; animation-delay: 0.5s; }
    .star:nth-child(8) { top: 25%; left: 85%; width: 2px; height: 2px; animation-delay: 2s; }
    @keyframes twinkle {0% { opacity: 0.4; transform: scale(0.8); }50% { opacity: 1; transform: scale(1.1); }100% { opacity: 0.4; transform: scale(0.8); }}
    .container {background: #111;padding: 40px 30px 30px 30px;border-radius: 20px;box-shadow: 0 0 30px rgba(0,255,0,0.15), inset 0 0 10px rgba(0,255,0,0.05);border: 1.5px solid #00ff9d;width: 100%;max-width: 400px;text-align: center;position: relative;z-index: 1;animation: fadeIn 1s ease forwards;}
    h1 {font-weight: 900;font-size: 2.5rem;color: #00ff9d;margin-bottom: 25px;letter-spacing: 3px;text-shadow: 0 0 10px #00ff9d;}
    h3 {color: #00ff9d;font-size: 1.5rem;margin-bottom: 5px;}
    h6 {font-weight: 400;color: #ccc;font-size: 1rem;margin-bottom: 25px;}
    .input-container {display: flex;flex-direction: column;gap: 18px;margin-bottom: 15px;}
    input {background: #1d1d1d;border: none;border-radius: 12px;padding: 14px 20px;font-size: 1.1rem;color: white;box-shadow: inset 2px 2px 10px #000, inset -2px -2px 8px #1a1a1a;outline: none;transition: box-shadow 0.3s ease;}
    input:focus {box-shadow: 0 0 10px #00ff9d;}
    button {background: #00ff9d;border: none;border-radius: 12px;padding: 15px;font-size: 1.2rem;font-weight: 700;color: black;cursor: pointer;transition: background-color 0.3s ease, transform 0.2s ease;opacity: 1;visibility: visible;box-shadow: 0 0 12px #00ff9d;}
    button:hover {background-color: #00cc7a;transform: scale(1.05);}
    #pair {margin-top: 25px;font-size: 1.2rem;font-weight: 700;color: #00ff9d;text-shadow: 0 0 10px #00ff9d;user-select: text;min-height: 32px;word-break: break-word;transition: color 0.3s ease;}
    #copyButton {margin-top: 15px;background: #121212;border: 1.5px dashed #00ff9d;border-radius: 12px;padding: 10px 20px;color: #00ff9d;font-weight: 700;cursor: pointer;box-shadow: 0 0 8px #00ff9d;transition: background-color 0.3s ease;display: none;user-select: none;}
    #copyButton:hover {background-color: #252525;}
    .powered-by {margin-top: 30px;color: #00ff9d;font-weight: 600;font-size: 0.95rem;opacity: 0.7;letter-spacing: 1px;cursor: default;user-select: none;text-shadow: 0 0 5px rgba(0, 255, 153, 0.4);transition: opacity 0.3s ease;}
    .powered-by:hover {opacity: 1;}
    #loading-spinner {display: none;justify-content: center;margin-top: 15px;}
    .loader {display: flex;gap: 6px;}
    .loader div {width: 12px;height: 12px;background-color: #00ff9d;border-radius: 50%;animation: bounce 0.6s infinite alternate;}
    .loader div:nth-child(2) {animation-delay: 0.2s;}
    .loader div:nth-child(3) {animation-delay: 0.4s;}
    @keyframes bounce {to {opacity: 0.3;transform: translateY(-10px);}}
    @keyframes fadeIn {from { opacity: 0; transform: translateY(20px);}to { opacity: 1; transform: translateY(0);}}
    @media (max-width: 480px) {.container {padding: 30px 20px 25px 20px;}h1 {font-size: 2rem;}button {font-size: 1rem;}}
  </style>
</head>
<body>
  <div class="background-effects" aria-hidden="true">
    <div class="shape square"></div><div class="shape circle"></div><div class="shape triangle"></div><div class="shape square"></div>
    <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
  </div>

  <main class="container" role="main">
    <h1>B.M.B-TECH PAIR</h1>
    <h3>Link with Phone Number</h3>
    <h6>Enter your number with country code</h6>

    <form id="pairForm" class="input-container" novalidate>
      <input
        id="phoneInput"
        type="tel"
        placeholder="+2557678"
        aria-label="Phone number input"
        required
        pattern="^\+?\d{7,15}$"
        title="Enter phone number with country code, e.g., +2557678 or 2557678"
      />
      <button type="submit" id="submitBtn">Get Pairing Code</button>
    </form>

    <div id="loading-spinner">
      <div class="loader"><div></div><div></div><div></div></div>
    </div>

    <div id="pair"></div>
    <button id="copyButton">Copy Pairing Code</button>
  </main>

  <div class="powered-by">Powered By Bmb Tech</div>

  <script>
    const form = document.getElementById('pairForm');
    const phoneInput = document.getElementById('phoneInput');
    const pairDiv = document.getElementById('pair');
    const copyBtn = document.getElementById('copyButton');
    const loadingSpinner = document.getElementById('loading-spinner');

    form.addEventListener('submit', async e => {
      e.preventDefault();
      let phone = phoneInput.value.trim();

      // Normalize: ensure it starts with +
      if (!phone.startsWith('+')) {
        phone = '+' + phone.replace(/^0+/, ''); // pia toa 0 mwanzoni
      }

      if (!phone.match(/^\+\d{7,15}$/)) {
        pairDiv.textContent = 'Please enter a valid phone number with country code.';
        copyBtn.style.display = 'none';
        return;
      }

      loadingSpinner.style.display = 'flex';
      pairDiv.textContent = '';
      copyBtn.style.display = 'none';

      try {
        const response = await fetch(`/code?number=${encodeURIComponent(phone.replace(/\D/g, ''))}`);
        if (!response.ok) throw new Error('Network response was not ok');

        const data = await response.json();
        const pairingCode = data.code || 'Service Unavailable';

        loadingSpinner.style.display = 'none';
        pairDiv.textContent = pairingCode;
        if (pairingCode !== 'Service Unavailable') {
          copyBtn.style.display = 'inline-block';
        } else {
          copyBtn.style.display = 'none';
        }
      } catch (error) {
        loadingSpinner.style.display = 'none';
        pairDiv.textContent = 'Error fetching pairing code. Please try again later.';
        copyBtn.style.display = 'none';
        console.error('Fetch error:', error);
      }
    });

    copyBtn.addEventListener('click', () => {
      if (pairDiv.textContent) {
        navigator.clipboard.writeText(pairDiv.textContent)
          .then(() => {
            const originalText = pairDiv.textContent;
            pairDiv.textContent = originalText + "  ✔️ Done Copy";
            setTimeout(() => { pairDiv.textContent = originalText; }, 2000);
          })
          .catch(() => { console.error('Failed to copy pairing code.'); });
      }
    });
  </script>
</body>
</html>