<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bulk Template Generator</title>
<script>
function addVariable() {
const container = document.getElementById('variableContainer');
const variableCount = container.children.length + 1;
const newVariableGroup = document.createElement('div');
newVariableGroup.className = 'variable-group';
newVariableGroup.innerHTML = `<textarea placeholder="Enter one word per line for [var${variableCount}]" rows="5" class="variableInput"></textarea>`;
container.appendChild(newVariableGroup);
}
function customizeText() {
const inputText = document.getElementById('inputText').value;
const variableInputs = document.querySelectorAll('.variableInput');
const wordArrays = Array.from(variableInputs).map(textarea => textarea.value.split('\n').map(word => word.trim()));
const maxLength = Math.max(...wordArrays.map(words => words.length));
let results = [];
for (let i = 0; i < maxLength; i++) {
let modifiedText = inputText;
wordArrays.forEach((words, index) => {
const placeholder = new RegExp(`\\[var${index + 1}\\]`, 'g');
const word = words[i % words.length] || '';
modifiedText = modifiedText.replace(placeholder, word);
});
results.push(modifiedText);
}
document.getElementById('outputContainer').value = results.join('\n');
}
function exportToTextFile() {
const text = document.getElementById('outputContainer').value;
const blob = new Blob([text], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'svli-output.txt';
link.click();
URL.revokeObjectURL(link.href);
}
function copyToClipboard() {
const outputText = document.getElementById('outputContainer');
outputText.select();
document.execCommand('copy');
alert('Copied to clipboard!');
}
function copyShareableLink() {
const shareableLink = document.getElementById('shareableLink');
shareableLink.select();
document.execCommand('copy');
alert('Shareable link copied to clipboard!');
}
function generateShareableLink() {
const inputText = document.getElementById('inputText').value;
const variableInputs = document.querySelectorAll('.variableInput');
const variables = Array.from(variableInputs).map(textarea => textarea.value.split('\n').map(word => word.trim()).join(',')).join(';');
const url = new URL(window.location.href);
url.searchParams.set('template', btoa(inputText));
url.searchParams.set('variables', btoa(variables));
const shareableLink = document.getElementById('shareableLink');
shareableLink.value = url.toString();
}
function loadFromUrl() {
const urlParams = new URLSearchParams(window.location.search);
const template = urlParams.get('template');
const variables = urlParams.get('variables');
if (template) {
document.getElementById('inputText').value = atob(template);
}
if (variables) {
const variableContainer = document.getElementById('variableContainer');
variableContainer.innerHTML = ''; // Clear existing variables
const variableList = atob(variables).split(';');
variableList.forEach((variable, index) => {
const newVariableGroup = document.createElement('div');
newVariableGroup.className = 'variable-group';
newVariableGroup.innerHTML = `<textarea placeholder="Enter one word per line for [var${index + 1}]" rows="5" class="variableInput">${variable.split(',').join('\n')}</textarea>`;
variableContainer.appendChild(newVariableGroup);
});
}
}
document.addEventListener('DOMContentLoaded', loadFromUrl);
</script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 20px;
color: #111;
background-color: #fefefe;
}
.container {
max-width: 600px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
}
h1 {
font-size: 1.5em;
margin-bottom: 20px;
}
input,
button {
padding: 10px;
margin-top: 10px;
font-size: 1em;
}
textarea {
width: 100%;
margin-top: 10px;
padding: 10px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
}
.output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
.variables {
margin-top: 10px;
}
.variable-group {
margin-bottom: 20px;
}
.small-button {
font-size: 0.8em;
padding: 5px;
}
.yellow-button {
margin-right: 10px;
background-color: #fbb000;
border: none;
color: white;
padding: 3px 7px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
.blue-button {
margin-right: 10px;
background-color: #007bff;
border: none;
color: white;
padding: 3px 7px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
.green-button {
margin-right: 10px;
background-color: #28a745;
border: none;
color: white;
padding: 3px 7px;
border-radius: 4px;
cursor: pointer;
font-size: 1.5rem;
font-weight: bold;
}
hr {
color: #ddd;
border-top: 1px solid #ddd;
}
.footer {
}
</style>
</head>
<body>
<div class="container">
<h1>Bulk Template Generator</h1>
<hr>
<h2>Template:</h2>
<textarea id="inputText">Example: host [var1] has IP [var2].</textarea>
<hr>
<h2>Variables:</h2>
<div id="variableContainer" class="variables">
<div class="variable-group">
<textarea placeholder="Enter one word per line for [var1]" rows="5" class="variableInput"></textarea>
</div>
<div class="variable-group">
<textarea placeholder="Enter one word per line for [var2]" rows="5" class="variableInput"></textarea>
</div>
</div>
<button class="yellow-button" onclick="addVariable()">Add Variable</button><br>
<hr>
<h2>Generating:</h2>
<button class="green-button" onclick="customizeText()">RUN</button>
<textarea id="outputContainer" class="output" row="10" readonly></textarea>
<button class="blue-button" onclick="copyToClipboard()">Copy</button>
<button class="blue-button" onclick="exportToTextFile()">Export to File</button>
<hr>
<h2>Sharing:</h2>
<button class="blue-button" onclick="generateShareableLink()">Generate Shareable Link</button>
<textarea id="shareableLink" class="output" readonly></textarea>
<button class="blue-button" onclick="copyShareableLink()">Copy Link</button>
</div>
</body>
</html>