| <!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> |
