<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Pattern Generator</title>
<style>
:root {
--primary: #4F46E5;
--primary-hover: #4338CA;
--secondary: #E5E7EB;
--secondary-hover: #D1D5DB;
--success: #10B981;
--accent: #059669;
--bg-color: #F3F4F6;
--card-bg: #FFFFFF;
--text-main: #1F2937;
--text-muted: #4B5563;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
margin: 0;
padding: 2rem;
display: flex;
justify-content: center;
}
.container {
background: var(--card-bg);
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 1200px;
}
h1 {
margin-top: 0;
font-size: 1.5rem;
color: var(--text-main);
border-bottom: 2px solid #E5E7EB;
padding-bottom: 1rem;
margin-bottom: 1.5rem;
}
.input-group {
margin-bottom: 1.5rem;
}
label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: #374151;
}
textarea, input[type="text"] {
width: 100%;
padding: 0.75rem;
border: 1px solid #D1D5DB;
border-radius: 6px;
font-family: inherit;
box-sizing: border-box;
font-size: 1rem;
}
textarea {
resize: vertical;
min-height: 180px;
font-family: monospace;
}
.button-group {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.master-copy-group {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
padding: 1rem;
background: #EEF2FF;
border-radius: 8px;
border: 1px solid #E0E7FF;
}
button {
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
flex: 1;
}
.btn-primary {
background-color: var(--primary);
color: white;
}
.btn-primary:hover {
background-color: var(--primary-hover);
}
.btn-secondary {
background-color: var(--secondary);
color: var(--text-muted);
}
.btn-secondary:hover {
background-color: var(--secondary-hover);
color: var(--text-main);
}
.btn-master-copy {
background-color: #FFFFFF;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-master-copy:hover {
background-color: var(--primary);
color: #FFFFFF;
}
.results-section {
margin-bottom: 2rem;
}
.section-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.result-card {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 1.5rem;
position: relative;
display: flex;
flex-direction: column;
}
.card-header-group {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #E5E7EB;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.result-card h3 {
margin: 0;
font-size: 1.25rem;
color: var(--primary);
}
.btn-copy-all {
background: none;
border: 1px solid var(--primary);
color: var(--primary);
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
flex: none;
transition: all 0.2s;
}
.btn-copy-all:hover {
background: var(--primary);
color: white;
}
.list-container {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0.5rem;
background: #FFFFFF;
border: 1px solid #F3F4F6;
border-radius: 4px;
font-family: monospace;
font-size: 1.25rem;
font-weight: 500;
}
.btn-copy-item {
background: none;
border: none;
color: #9CA3AF;
cursor: pointer;
font-size: 0.85rem;
padding: 0.2rem;
border-radius: 4px;
}
.btn-copy-item:hover {
color: var(--primary);
background: #F3F4F6;
}
.error {
color: #DC2626;
margin-bottom: 1rem;
font-weight: 500;
padding: 0.75rem;
background: #FEF2F2;
border-radius: 6px;
display: none;
}
</style>
</head>
<body>

<div class="container">
<h1>Number Pattern Generator</h1>

<div id="error-msg" class="error"></div>

<div class="input-group">
<label for="dataset">Dataset (Numbers to search):</label>
<textarea id="dataset">170913
249068
278057
781396
768960
450872
143807
219981</textarea>
</div>

<div class="input-group">
<label for="targetPair">Target Pair:</label>
<input type="text" id="targetPair" value="26" maxlength="2" placeholder="e.g., 26">
</div>

<div class="button-group">
<button class="btn-primary" onclick="generatePatterns()">Generate</button>
<button class="btn-secondary" onclick="clearFields()">Clear Fields</button>
</div>

<div id="masterCopySection" class="master-copy-group" style="display: none;">
<button class="btn-master-copy" id="btnMaster2D" onclick="copyGlobalGroup('two-digit')">📋 Copy All 2-Digit Patterns</button>
<button class="btn-master-copy" id="btnMaster3D" onclick="copyGlobalGroup('three-digit')">📋 Copy All 3-Digit Patterns</button>
</div>

<div id="resultsWrapper" style="display: none;">
<div class="results-section">
<div class="section-title">Base Trackers (2-Digit Outcomes)</div>
<div class="results-grid" style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));">
<div class="result-card" id="cardA" data-type="two-digit"></div>
<div class="result-card" id="cardB" data-type="two-digit"></div>
</div>
</div>

<div class="results-section">
<div class="section-title">Cross-Generated Variations (3-Digit Outcomes)</div>
<div class="results-grid">
<div class="result-card" id="cardSpecialA_BA" data-type="three-digit"></div>
<div class="result-card" id="cardSpecialA_AB" data-type="three-digit"></div>
<div class="result-card" id="cardSpecialB_AB" data-type="three-digit"></div>
<div class="result-card" id="cardSpecialB_BA" data-type="three-digit"></div>
</div>
</div>
</div>
</div>

<script>
function generatePatterns() {
const datasetText = document.getElementById('dataset').value.trim();
const targetPair = document.getElementById('targetPair').value.trim();
const errorMsg = document.getElementById('error-msg');
const resultsWrapper = document.getElementById('resultsWrapper');
const masterCopySection = document.getElementById('masterCopySection');

// Reset UI Viewports
errorMsg.style.display = 'none';
resultsWrapper.style.display = 'none';
masterCopySection.style.display = 'none';

// Validate Inputs
if (targetPair.length !== 2 || isNaN(targetPair)) {
errorMsg.textContent = 'Please enter exactly 2 numeric digits for the Target Pair.';
errorMsg.style.display = 'block';
return;
}

if (datasetText.length === 0) {
errorMsg.textContent = 'Please enter a dataset of numbers to search.';
errorMsg.style.display = 'block';
return;
}

const digitA = targetPair[0];
const digitB = targetPair[1];
const pairAB = digitA + digitB;
const pairBA = digitB + digitA;

const nextDigitsA = new Set();
const nextDigitsB = new Set();

const numbers = datasetText.split(/\s+/);

numbers.forEach(num => {
for (let i = 0; i < num.length - 1; i++) {
if (num[i] === digitA && /[0-9]/.test(num[i + 1])) {
nextDigitsA.add(num[i + 1]);
}
if (num[i] === digitB && /[0-9]/.test(num[i + 1])) {
nextDigitsB.add(num[i + 1]);
}
}
});

const sortedSet = (set) => Array.from(set).sort((a, b) => a - b);

// Core Renderer incorporating individual and block copying functions
const formatCardHTML = (title, prefix, suffixSet, cardId) => {
const sortedArray = sortedSet(suffixSet);

let headerHtml = `
<div class="card-header-group">
<h3>${title}</h3>
${sortedArray.length > 0 ? `<button class="btn-copy-all" onclick="copyCardGroup('${cardId}')">Copy All</button>` : ''}
</div>
`;

if (sortedArray.length === 0) {
return headerHtml + `<div class="list-item" style="color: #9CA3AF; font-size: 1rem; justify-content: center;">No matches</div>`;
}

let listHtml = '<div class="list-container">';
sortedArray.forEach((suffix) => {
const combinedValue = `${prefix}${suffix}`;
listHtml += `
<div class="list-item">
<span>${combinedValue}</span>
<button class="btn-copy-item" title="Copy item" onclick="copySingleItem('${combinedValue}', this)">📋</button>
</div>
`;
});
listHtml += '</div>';

return headerHtml + listHtml;
};

// Render targets natively into respective DOM IDs
document.getElementById('cardA').innerHTML = formatCardHTML(`For ${digitA}`, digitA, nextDigitsA, 'cardA');
document.getElementById('cardB').innerHTML = formatCardHTML(`For ${digitB}`, digitB, nextDigitsB, 'cardB');

document.getElementById('cardSpecialA_BA').innerHTML = formatCardHTML(`For ${digitA} (Alt - ${pairBA})`, pairBA, nextDigitsA, 'cardSpecialA_BA');
document.getElementById('cardSpecialA_AB').innerHTML = formatCardHTML(`For ${digitA} (Alt - ${pairAB})`, pairAB, nextDigitsA, 'cardSpecialA_AB');
document.getElementById('cardSpecialB_AB').innerHTML = formatCardHTML(`For ${digitB} (Alt - ${pairAB})`, pairAB, nextDigitsB, 'cardSpecialB_AB');
document.getElementById('cardSpecialB_BA').innerHTML = formatCardHTML(`For ${digitB} (Alt - ${pairBA})`, pairBA, nextDigitsB, 'cardSpecialB_BA');

masterCopySection.style.display = 'flex';
resultsWrapper.style.display = 'block';
}

// Individual item clipboard processing pipeline
function copySingleItem(text, buttonEl) {
navigator.clipboard.writeText(text).then(() => {
const originalText = buttonEl.textContent;
buttonEl.textContent = '✓';
buttonEl.style.color = 'var(--success)';
setTimeout(() => {
buttonEl.textContent = originalText;
buttonEl.style.color = '';
}, 1000);
});
}

// Card complete block array list copy pipeline
function copyCardGroup(cardId) {
const cardElement = document.getElementById(cardId);
const spanElements = cardElement.querySelectorAll('.list-container .list-item span');
const copyButton = cardElement.querySelector('.btn-copy-all');

const valuesArray = [];
spanElements.forEach(span => valuesArray.push(span.textContent));

const textToCopy = valuesArray.join('\n');

navigator.clipboard.writeText(textToCopy).then(() => {
const originalText = copyButton.textContent;
copyButton.textContent = 'Copied!';
copyButton.style.borderColor = 'var(--success)';
copyButton.style.backgroundColor = 'var(--success)';
copyButton.style.color = 'white';

setTimeout(() => {
copyButton.textContent = originalText;
copyButton.style.borderColor = '';
copyButton.style.backgroundColor = '';
copyButton.style.color = '';
}, 1200);
});
}

// Master Clipboard Separation Engine (2-Digit vs 3-Digit)
function copyGlobalGroup(dataType) {
const cards = document.querySelectorAll(`.result-card[data-type="${dataType}"]`);
const valuesSet = new Set(); // Using Set to avoid duplicate entries across similar outputs

cards.forEach(card => {
const spans = card.querySelectorAll('.list-container .list-item span');
spans.forEach(span => valuesSet.add(span.textContent));
});

const textToCopy = Array.from(valuesSet).join('\n');
const targetButton = dataType === 'two-digit' ? document.getElementById('btnMaster2D') : document.getElementById('btnMaster3D');
const originalText = targetButton.textContent;

if (textToCopy.trim().length === 0) {
targetButton.textContent = 'No numbers to copy!';
setTimeout(() => targetButton.textContent = originalText, 1500);
return;
}

navigator.clipboard.writeText(textToCopy).then(() => {
targetButton.textContent = '✓ Copied All Matches!';
targetButton.style.backgroundColor = 'var(--success)';
targetButton.style.color = 'white';
targetButton.style.borderColor = 'var(--success)';

setTimeout(() => {
targetButton.textContent = originalText;
targetButton.style.backgroundColor = '';
targetButton.style.color = '';
targetButton.style.borderColor = '';
}, 1500);
});
}

// Input layout absolute UI clear functional reset
function clearFields() {
document.getElementById('dataset').value = '';
document.getElementById('targetPair').value = '';
document.getElementById('error-msg').style.display = 'none';
document.getElementById('resultsWrapper').style.display = 'none';
document.getElementById('masterCopySection').style.display = 'none';
}

window.onload = generatePatterns;
</script>

</body>
</html>