File size: 5,607 Bytes
63969dd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | <!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 -->
<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 Content -->
<main class="dashboard-main grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Source Selection -->
<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>
<!-- Mapping Interface -->
<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>
<!-- Results Display -->
<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>
<!-- JavaScript Logic -->
<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> |