diff --git a/_layouts/default.html b/_layouts/default.html
index a875d58..6708c63 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1347,6 +1347,59 @@
font-size: 0.9rem;
}
}
+
+ /* Variable Input Field Styles */
+ .variable-container {
+ margin-bottom: 24px;
+ padding: 16px;
+ background: rgba(16, 185, 129, 0.05);
+ border-radius: 8px;
+ border: 1px solid var(--accent-color);
+ }
+
+ .variable-form {
+ display: grid;
+ gap: 12px;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ }
+
+ .variable-input-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .variable-input-wrapper label {
+ font-size: 0.8rem;
+ color: var(--accent-color);
+ font-weight: 500;
+ }
+
+ .variable-input {
+ padding: 8px;
+ border: 1px solid #e1e4e8;
+ border-radius: 4px;
+ font-size: 0.9rem;
+ background: var(--bg-color-light);
+ color: var(--text-color-light);
+ transition: all 0.2s ease;
+ }
+
+ .dark-mode .variable-input {
+ background: var(--bg-color-dark);
+ color: var(--text-color-dark);
+ border-color: #2d2d2d;
+ }
+
+ .variable-input:focus {
+ outline: none;
+ border-color: var(--accent-color);
+ box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
+ }
+
+ .modal-content {
+ white-space: pre-wrap;
+ }
{% include head-custom.html %}
@@ -1423,13 +1476,13 @@
- {{ content }}
+ {{ content }}
{% if site.github.private != true and site.github.license %}
-
+ {% endif %}
diff --git a/script.js b/script.js
index 6c1bf1f..d726227 100644
--- a/script.js
+++ b/script.js
@@ -13,6 +13,95 @@ function toggleDarkMode() {
moonIcon.style.display = isDarkMode ? "block" : "none";
}
+// Add these new functions at the top
+function extractVariables(text) {
+ const regex = /\${([^}]+)}/g;
+ const variables = [];
+ let match;
+
+ while ((match = regex.exec(text)) !== null) {
+ const [variable, defaultValue] = match[1].split(':').map(s => s.trim());
+ variables.push({ name: variable, default: defaultValue || '' });
+ }
+
+ return [...new Set(variables.map(v => JSON.stringify(v)))].map(v => JSON.parse(v)); // Remove duplicates
+}
+
+function createVariableInputs(variables, container) {
+ const form = document.createElement('div');
+ form.className = 'variable-form';
+
+ variables.forEach(variable => {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'variable-input-wrapper';
+
+ const label = document.createElement('label');
+ label.textContent = variable.name;
+ label.style.fontWeight = '600';
+
+ const input = document.createElement('input');
+ input.type = 'text';
+ input.className = 'variable-input';
+ input.placeholder = variable.default || `Enter ${variable.name}`;
+ input.dataset.variable = variable.name;
+ input.dataset.default = variable.default || '';
+
+ wrapper.appendChild(label);
+ wrapper.appendChild(input);
+ form.appendChild(wrapper);
+ });
+
+ container.appendChild(form);
+ return form;
+}
+// Function to update the prompt preview with user input
+function updatePromptPreview(promptText, form) {
+ let previewText = promptText;
+ const inputs = form.querySelectorAll('.variable-input');
+
+ inputs.forEach(input => {
+ const value = input.value.trim();
+ const variable = input.dataset.variable;
+ const defaultValue = input.dataset.default;
+ const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, 'g');
+ let replacement;
+ if (value) {
+ // User entered value
+ replacement = value;
+ } else if (defaultValue) {
+ // Show default value with highlight
+ replacement = defaultValue;
+ } else {
+ // No value or default, show variable name
+ replacement = variable;
+ }
+ replacement = `