|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Tool Weaver</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6A1B9A', |
|
|
secondary: '#F50057', |
|
|
background: '#F3E5F5', |
|
|
text: '#333333' |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Roboto', 'sans-serif'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="font-sans bg-background text-text min-h-screen"> |
|
|
<div class="dashboard-container max-w-6xl mx-auto p-6"> |
|
|
|
|
|
<header class="dashboard-header text-center mb-8"> |
|
|
<h1 class="text-4xl font-bold text-primary">Tool Weaver</h1> |
|
|
<p class="text-lg text-secondary">Weave data from SYS and TEMPLATE sources</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="dashboard-main grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<section class="bg-white rounded-lg shadow p-4"> |
|
|
<h2 class="text-xl font-semibold mb-4">Select Sources</h2> |
|
|
<form id="sourceForm" class="space-y-4"> |
|
|
<div class="form-group"> |
|
|
<label for="sys-source" class="block text-sm font-medium">SYS Source</label> |
|
|
<select id="sys-source" name="sys-source" class="w-full border rounded p-2"> |
|
|
<option value="sys1">SYS Source 1</option> |
|
|
<option value="sys2">SYS Source 2</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="template-source" class="block text-sm font-medium">TEMPLATE Source</label> |
|
|
<select id="template-source" name="template-source" class="w-full border rounded p-2"> |
|
|
<option value="template1">TEMPLATE Source 1</option> |
|
|
<option value="template2">TEMPLATE Source 2</option> |
|
|
</select> |
|
|
</div> |
|
|
<button type="submit" class="bg-primary text-white px-4 py-2 rounded hover:bg-opacity-90 transition"> |
|
|
Load Sources |
|
|
</button> |
|
|
</form> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-lg shadow p-4"> |
|
|
<h2 class="text-xl font-semibold mb-4">Map Fields</h2> |
|
|
<p class="text-sm mb-4">Drag fields from SYS Source to TEMPLATE Source to map them.</p> |
|
|
<div id="mappingInterface" class="border-2 border-dashed border-primary p-4 rounded min-h-32"> |
|
|
<p class="text-center text-gray-500">Mapping area</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-lg shadow p-4"> |
|
|
<h2 class="text-xl font-semibold mb-4">Woven Output</h2> |
|
|
<div id="outputContainer" class="border p-4 rounded min-h-32 text-sm bg-gray-50 overflow-auto"> |
|
|
<p class="text-center text-gray-500">Results will appear here after weaving.</p> |
|
|
</div> |
|
|
<button id="exportBtn" class="mt-4 bg-secondary text-white px-4 py-2 rounded hover:bg-opacity-90 transition"> |
|
|
Export Results |
|
|
</button> |
|
|
</section> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script> |
|
|
const sysData = { |
|
|
sys1: { user_name: "John Doe", user_email: "john.doe@example.com" }, |
|
|
sys2: { user_name: "Jane Smith", user_email: "jane.smith@example.com" } |
|
|
}; |
|
|
|
|
|
const templateData = { |
|
|
template1: { name: "", email: "" }, |
|
|
template2: { name: "", email: "" } |
|
|
}; |
|
|
|
|
|
const mapping = { |
|
|
name: "user_name", |
|
|
email: "user_email" |
|
|
}; |
|
|
|
|
|
function weaveTool(sysData, template, mapping) { |
|
|
const result = {}; |
|
|
for (const key in mapping) { |
|
|
result[key] = sysData[mapping[key]]; |
|
|
} |
|
|
return result; |
|
|
} |
|
|
|
|
|
document.getElementById("sourceForm").addEventListener("submit", function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const sysKey = document.getElementById("sys-source").value; |
|
|
const templateKey = document.getElementById("template-source").value; |
|
|
|
|
|
const selectedSys = sysData[sysKey]; |
|
|
const selectedTemplate = templateData[templateKey]; |
|
|
|
|
|
const wovenResult = weaveTool(selectedSys, selectedTemplate, mapping); |
|
|
|
|
|
const outputContainer = document.getElementById("outputContainer"); |
|
|
outputContainer.innerHTML = `<pre class="whitespace-pre-wrap">${JSON.stringify(wovenResult, null, 2)}</pre>`; |
|
|
}); |
|
|
|
|
|
document.getElementById("exportBtn").addEventListener("click", function () { |
|
|
const output = document.getElementById("outputContainer").innerText; |
|
|
const blob = new Blob([output], { type: "application/json" }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement("a"); |
|
|
a.href = url; |
|
|
a.download = "woven_output.json"; |
|
|
a.click(); |
|
|
URL.revokeObjectURL(url); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=Loddina/iweave" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
