API tools faq
paste
praveenramesh

Untitled

praveenramesh
May 26th, 2026
16,018
0
Never
5
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Number Pattern Generator</title>
  7. <style>
  8. :root {
  9. --primary: #4F46E5;
  10. --primary-hover: #4338CA;
  11. --secondary: #E5E7EB;
  12. --secondary-hover: #D1D5DB;
  13. --success: #10B981;
  14. --accent: #059669;
  15. --bg-color: #F3F4F6;
  16. --card-bg: #FFFFFF;
  17. --text-main: #1F2937;
  18. --text-muted: #4B5563;
  19. }
  20. body {
  21. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  22. background-color: var(--bg-color);
  23. color: var(--text-main);
  24. margin: 0;
  25. padding: 2rem;
  26. display: flex;
  27. justify-content: center;
  28. }
  29. .container {
  30. background: var(--card-bg);
  31. padding: 2.5rem;
  32. border-radius: 12px;
  33. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  34. width: 100%;
  35. max-width: 1200px;
  36. }
  37. h1 {
  38. margin-top: 0;
  39. font-size: 1.5rem;
  40. color: var(--text-main);
  41. border-bottom: 2px solid #E5E7EB;
  42. padding-bottom: 1rem;
  43. margin-bottom: 1.5rem;
  44. }
  45. .input-group {
  46. margin-bottom: 1.5rem;
  47. }
  48. label {
  49. display: block;
  50. font-weight: 600;
  51. margin-bottom: 0.5rem;
  52. color: #374151;
  53. }
  54. textarea, input[type="text"] {
  55. width: 100%;
  56. padding: 0.75rem;
  57. border: 1px solid #D1D5DB;
  58. border-radius: 6px;
  59. font-family: inherit;
  60. box-sizing: border-box;
  61. font-size: 1rem;
  62. }
  63. textarea {
  64. resize: vertical;
  65. min-height: 180px;
  66. font-family: monospace;
  67. }
  68. .button-group {
  69. display: flex;
  70. gap: 1rem;
  71. margin-bottom: 1rem;
  72. }
  73. .master-copy-group {
  74. display: flex;
  75. gap: 1rem;
  76. margin-bottom: 2rem;
  77. padding: 1rem;
  78. background: #EEF2FF;
  79. border-radius: 8px;
  80. border: 1px solid #E0E7FF;
  81. }
  82. button {
  83. border: none;
  84. padding: 0.75rem 1.5rem;
  85. border-radius: 6px;
  86. font-size: 1rem;
  87. font-weight: 600;
  88. cursor: pointer;
  89. transition: background-color 0.2s, color 0.2s;
  90. flex: 1;
  91. }
  92. .btn-primary {
  93. background-color: var(--primary);
  94. color: white;
  95. }
  96. .btn-primary:hover {
  97. background-color: var(--primary-hover);
  98. }
  99. .btn-secondary {
  100. background-color: var(--secondary);
  101. color: var(--text-muted);
  102. }
  103. .btn-secondary:hover {
  104. background-color: var(--secondary-hover);
  105. color: var(--text-main);
  106. }
  107. .btn-master-copy {
  108. background-color: #FFFFFF;
  109. border: 2px solid var(--primary);
  110. color: var(--primary);
  111. }
  112. .btn-master-copy:hover {
  113. background-color: var(--primary);
  114. color: #FFFFFF;
  115. }
  116. .results-section {
  117. margin-bottom: 2rem;
  118. }
  119. .section-title {
  120. font-size: 1.1rem;
  121. font-weight: 600;
  122. color: var(--text-muted);
  123. margin-bottom: 1rem;
  124. text-transform: uppercase;
  125. letter-spacing: 0.05em;
  126. }
  127. .results-grid {
  128. display: grid;
  129. grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  130. gap: 1.5rem;
  131. }
  132. .result-card {
  133. background: #F9FAFB;
  134. border: 1px solid #E5E7EB;
  135. border-radius: 8px;
  136. padding: 1.5rem;
  137. position: relative;
  138. display: flex;
  139. flex-direction: column;
  140. }
  141. .card-header-group {
  142. display: flex;
  143. justify-content: space-between;
  144. align-items: center;
  145. border-bottom: 2px solid #E5E7EB;
  146. padding-bottom: 0.5rem;
  147. margin-bottom: 1rem;
  148. }
  149. .result-card h3 {
  150. margin: 0;
  151. font-size: 1.25rem;
  152. color: var(--primary);
  153. }
  154. .btn-copy-all {
  155. background: none;
  156. border: 1px solid var(--primary);
  157. color: var(--primary);
  158. padding: 0.25rem 0.5rem;
  159. font-size: 0.75rem;
  160. border-radius: 4px;
  161. cursor: pointer;
  162. font-weight: 600;
  163. flex: none;
  164. transition: all 0.2s;
  165. }
  166. .btn-copy-all:hover {
  167. background: var(--primary);
  168. color: white;
  169. }
  170. .list-container {
  171. display: flex;
  172. flex-direction: column;
  173. gap: 0.25rem;
  174. }
  175. .list-item {
  176. display: flex;
  177. justify-content: space-between;
  178. align-items: center;
  179. padding: 0.25rem 0.5rem;
  180. background: #FFFFFF;
  181. border: 1px solid #F3F4F6;
  182. border-radius: 4px;
  183. font-family: monospace;
  184. font-size: 1.25rem;
  185. font-weight: 500;
  186. }
  187. .btn-copy-item {
  188. background: none;
  189. border: none;
  190. color: #9CA3AF;
  191. cursor: pointer;
  192. font-size: 0.85rem;
  193. padding: 0.2rem;
  194. border-radius: 4px;
  195. }
  196. .btn-copy-item:hover {
  197. color: var(--primary);
  198. background: #F3F4F6;
  199. }
  200. .error {
  201. color: #DC2626;
  202. margin-bottom: 1rem;
  203. font-weight: 500;
  204. padding: 0.75rem;
  205. background: #FEF2F2;
  206. border-radius: 6px;
  207. display: none;
  208. }
  209. </style>
  210. </head>
  211. <body>
  212.  
  213. <div class="container">
  214. <h1>Number Pattern Generator</h1>
  215.  
  216. <div id="error-msg" class="error"></div>
  217.  
  218. <div class="input-group">
  219. <label for="dataset">Dataset (Numbers to search):</label>
  220. <textarea id="dataset">170913
  221. 249068
  222. 278057
  223. 781396
  224. 768960
  225. 450872
  226. 143807
  227. 219981</textarea>
  228. </div>
  229.  
  230. <div class="input-group">
  231. <label for="targetPair">Target Pair:</label>
  232. <input type="text" id="targetPair" value="26" maxlength="2" placeholder="e.g., 26">
  233. </div>
  234.  
  235. <div class="button-group">
  236. <button class="btn-primary" onclick="generatePatterns()">Generate</button>
  237. <button class="btn-secondary" onclick="clearFields()">Clear Fields</button>
  238. </div>
  239.  
  240. <div id="masterCopySection" class="master-copy-group" style="display: none;">
  241. <button class="btn-master-copy" id="btnMaster2D" onclick="copyGlobalGroup('two-digit')">📋 Copy All 2-Digit Patterns</button>
  242. <button class="btn-master-copy" id="btnMaster3D" onclick="copyGlobalGroup('three-digit')">📋 Copy All 3-Digit Patterns</button>
  243. </div>
  244.  
  245. <div id="resultsWrapper" style="display: none;">
  246. <div class="results-section">
  247. <div class="section-title">Base Trackers (2-Digit Outcomes)</div>
  248. <div class="results-grid" style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));">
  249. <div class="result-card" id="cardA" data-type="two-digit"></div>
  250. <div class="result-card" id="cardB" data-type="two-digit"></div>
  251. </div>
  252. </div>
  253.  
  254. <div class="results-section">
  255. <div class="section-title">Cross-Generated Variations (3-Digit Outcomes)</div>
  256. <div class="results-grid">
  257. <div class="result-card" id="cardSpecialA_BA" data-type="three-digit"></div>
  258. <div class="result-card" id="cardSpecialA_AB" data-type="three-digit"></div>
  259. <div class="result-card" id="cardSpecialB_AB" data-type="three-digit"></div>
  260. <div class="result-card" id="cardSpecialB_BA" data-type="three-digit"></div>
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265.  
  266. <script>
  267. function generatePatterns() {
  268. const datasetText = document.getElementById('dataset').value.trim();
  269. const targetPair = document.getElementById('targetPair').value.trim();
  270. const errorMsg = document.getElementById('error-msg');
  271. const resultsWrapper = document.getElementById('resultsWrapper');
  272. const masterCopySection = document.getElementById('masterCopySection');
  273.  
  274. // Reset UI Viewports
  275. errorMsg.style.display = 'none';
  276. resultsWrapper.style.display = 'none';
  277. masterCopySection.style.display = 'none';
  278.  
  279. // Validate Inputs
  280. if (targetPair.length !== 2 || isNaN(targetPair)) {
  281. errorMsg.textContent = 'Please enter exactly 2 numeric digits for the Target Pair.';
  282. errorMsg.style.display = 'block';
  283. return;
  284. }
  285.  
  286. if (datasetText.length === 0) {
  287. errorMsg.textContent = 'Please enter a dataset of numbers to search.';
  288. errorMsg.style.display = 'block';
  289. return;
  290. }
  291.  
  292. const digitA = targetPair[0];
  293. const digitB = targetPair[1];
  294. const pairAB = digitA + digitB;
  295. const pairBA = digitB + digitA;
  296.  
  297. const nextDigitsA = new Set();
  298. const nextDigitsB = new Set();
  299.  
  300. const numbers = datasetText.split(/\s+/);
  301.  
  302. numbers.forEach(num => {
  303. for (let i = 0; i < num.length - 1; i++) {
  304. if (num[i] === digitA && /[0-9]/.test(num[i + 1])) {
  305. nextDigitsA.add(num[i + 1]);
  306. }
  307. if (num[i] === digitB && /[0-9]/.test(num[i + 1])) {
  308. nextDigitsB.add(num[i + 1]);
  309. }
  310. }
  311. });
  312.  
  313. const sortedSet = (set) => Array.from(set).sort((a, b) => a - b);
  314.  
  315. // Core Renderer incorporating individual and block copying functions
  316. const formatCardHTML = (title, prefix, suffixSet, cardId) => {
  317. const sortedArray = sortedSet(suffixSet);
  318.  
  319. let headerHtml = `
  320. <div class="card-header-group">
  321. <h3>${title}</h3>
  322. ${sortedArray.length > 0 ? `<button class="btn-copy-all" onclick="copyCardGroup('${cardId}')">Copy All</button>` : ''}
  323. </div>
  324. `;
  325.  
  326. if (sortedArray.length === 0) {
  327. return headerHtml + `<div class="list-item" style="color: #9CA3AF; font-size: 1rem; justify-content: center;">No matches</div>`;
  328. }
  329.  
  330. let listHtml = '<div class="list-container">';
  331. sortedArray.forEach((suffix) => {
  332. const combinedValue = `${prefix}${suffix}`;
  333. listHtml += `
  334. <div class="list-item">
  335. <span>${combinedValue}</span>
  336. <button class="btn-copy-item" title="Copy item" onclick="copySingleItem('${combinedValue}', this)">📋</button>
  337. </div>
  338. `;
  339. });
  340. listHtml += '</div>';
  341.  
  342. return headerHtml + listHtml;
  343. };
  344.  
  345. // Render targets natively into respective DOM IDs
  346. document.getElementById('cardA').innerHTML = formatCardHTML(`For ${digitA}`, digitA, nextDigitsA, 'cardA');
  347. document.getElementById('cardB').innerHTML = formatCardHTML(`For ${digitB}`, digitB, nextDigitsB, 'cardB');
  348.  
  349. document.getElementById('cardSpecialA_BA').innerHTML = formatCardHTML(`For ${digitA} (Alt - ${pairBA})`, pairBA, nextDigitsA, 'cardSpecialA_BA');
  350. document.getElementById('cardSpecialA_AB').innerHTML = formatCardHTML(`For ${digitA} (Alt - ${pairAB})`, pairAB, nextDigitsA, 'cardSpecialA_AB');
  351. document.getElementById('cardSpecialB_AB').innerHTML = formatCardHTML(`For ${digitB} (Alt - ${pairAB})`, pairAB, nextDigitsB, 'cardSpecialB_AB');
  352. document.getElementById('cardSpecialB_BA').innerHTML = formatCardHTML(`For ${digitB} (Alt - ${pairBA})`, pairBA, nextDigitsB, 'cardSpecialB_BA');
  353.  
  354. masterCopySection.style.display = 'flex';
  355. resultsWrapper.style.display = 'block';
  356. }
  357.  
  358. // Individual item clipboard processing pipeline
  359. function copySingleItem(text, buttonEl) {
  360. navigator.clipboard.writeText(text).then(() => {
  361. const originalText = buttonEl.textContent;
  362. buttonEl.textContent = '✓';
  363. buttonEl.style.color = 'var(--success)';
  364. setTimeout(() => {
  365. buttonEl.textContent = originalText;
  366. buttonEl.style.color = '';
  367. }, 1000);
  368. });
  369. }
  370.  
  371. // Card complete block array list copy pipeline
  372. function copyCardGroup(cardId) {
  373. const cardElement = document.getElementById(cardId);
  374. const spanElements = cardElement.querySelectorAll('.list-container .list-item span');
  375. const copyButton = cardElement.querySelector('.btn-copy-all');
  376.  
  377. const valuesArray = [];
  378. spanElements.forEach(span => valuesArray.push(span.textContent));
  379.  
  380. const textToCopy = valuesArray.join('\n');
  381.  
  382. navigator.clipboard.writeText(textToCopy).then(() => {
  383. const originalText = copyButton.textContent;
  384. copyButton.textContent = 'Copied!';
  385. copyButton.style.borderColor = 'var(--success)';
  386. copyButton.style.backgroundColor = 'var(--success)';
  387. copyButton.style.color = 'white';
  388.  
  389. setTimeout(() => {
  390. copyButton.textContent = originalText;
  391. copyButton.style.borderColor = '';
  392. copyButton.style.backgroundColor = '';
  393. copyButton.style.color = '';
  394. }, 1200);
  395. });
  396. }
  397.  
  398. // Master Clipboard Separation Engine (2-Digit vs 3-Digit)
  399. function copyGlobalGroup(dataType) {
  400. const cards = document.querySelectorAll(`.result-card[data-type="${dataType}"]`);
  401. const valuesSet = new Set(); // Using Set to avoid duplicate entries across similar outputs
  402.  
  403. cards.forEach(card => {
  404. const spans = card.querySelectorAll('.list-container .list-item span');
  405. spans.forEach(span => valuesSet.add(span.textContent));
  406. });
  407.  
  408. const textToCopy = Array.from(valuesSet).join('\n');
  409. const targetButton = dataType === 'two-digit' ? document.getElementById('btnMaster2D') : document.getElementById('btnMaster3D');
  410. const originalText = targetButton.textContent;
  411.  
  412. if (textToCopy.trim().length === 0) {
  413. targetButton.textContent = 'No numbers to copy!';
  414. setTimeout(() => targetButton.textContent = originalText, 1500);
  415. return;
  416. }
  417.  
  418. navigator.clipboard.writeText(textToCopy).then(() => {
  419. targetButton.textContent = '✓ Copied All Matches!';
  420. targetButton.style.backgroundColor = 'var(--success)';
  421. targetButton.style.color = 'white';
  422. targetButton.style.borderColor = 'var(--success)';
  423.  
  424. setTimeout(() => {
  425. targetButton.textContent = originalText;
  426. targetButton.style.backgroundColor = '';
  427. targetButton.style.color = '';
  428. targetButton.style.borderColor = '';
  429. }, 1500);
  430. });
  431. }
  432.  
  433. // Input layout absolute UI clear functional reset
  434. function clearFields() {
  435. document.getElementById('dataset').value = '';
  436. document.getElementById('targetPair').value = '';
  437. document.getElementById('error-msg').style.display = 'none';
  438. document.getElementById('resultsWrapper').style.display = 'none';
  439. document.getElementById('masterCopySection').style.display = 'none';
  440. }
  441.  
  442. window.onload = generatePatterns;
  443. </script>
  444.  
  445. </body>
  446. </html>
Tags: 3 digit generator using ab
Advertisement
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!