Spaces:
Running
Running
File size: 3,287 Bytes
44a8902 | 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 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { margin: 0; padding: 8px; background: #ffffff; font-family: system-ui, -apple-system, sans-serif; }
/* Claude Semantic Color Classes */
.c-purple { fill: #EEEDFE; stroke: #534AB7; color: #3C3489; }
.c-teal { fill: #E1F5EE; stroke: #0F6E56; color: #085041; }
.c-coral { fill: #FAECE7; stroke: #993C1D; color: #712B13; }
.c-pink { fill: #FBEAF0; stroke: #993556; color: #72243E; }
.c-gray { fill: #F1EFE8; stroke: #5F5E5A; color: #444441; }
.c-blue { fill: #E6F1FB; stroke: #185FA5; color: #0C447C; }
.c-green { fill: #EAF3DE; stroke: #3B6D11; color: #27500A; }
.c-amber { fill: #FAEEDA; stroke: #854F0B; color: #633806; }
.c-red { fill: #FCEBEB; stroke: #A32D2D; color: #791F1F; }
.c-purple rect, .c-purple circle, .c-purple ellipse, .c-purple polygon { fill: #EEEDFE; stroke: #534AB7; }
.c-teal rect, .c-teal circle, .c-teal ellipse, .c-teal polygon { fill: #E1F5EE; stroke: #0F6E56; }
.c-coral rect, .c-coral circle, .c-coral ellipse, .c-coral polygon { fill: #FAECE7; stroke: #993C1D; }
.c-pink rect, .c-pink circle, .c-pink ellipse, .c-pink polygon { fill: #FBEAF0; stroke: #993556; }
.c-gray rect, .c-gray circle, .c-gray ellipse, .c-gray polygon { fill: #F1EFE8; stroke: #5F5E5A; }
.c-blue rect, .c-blue circle, .c-blue ellipse, .c-blue polygon { fill: #E6F1FB; stroke: #185FA5; }
.c-green rect, .c-green circle, .c-green ellipse, .c-green polygon { fill: #EAF3DE; stroke: #3B6D11; }
.c-amber rect, .c-amber circle, .c-amber ellipse, .c-amber polygon { fill: #FAEEDA; stroke: #854F0B; }
.c-red rect, .c-red circle, .c-red ellipse, .c-red polygon { fill: #FCEBEB; stroke: #A32D2D; }
.th, text.th { font-weight: 500; fill: #212121; }
.ts, text.ts { font-size: 12px; fill: #6b7280; }
.t, text.t { font-size: 14px; fill: #212121; }
svg .arr { fill: none; stroke: #888780; stroke-width: 1.5; }
svg .leader { fill: none; stroke: #888780; stroke-width: 0.5; stroke-dasharray: 2 2; }
svg .box { fill: #f9f9f9; stroke: #e5e5e5; }
/* Claude CSS variable fallbacks */
:root {
--color-text-primary: #212121;
--color-text-secondary: #6b7280;
--color-border-primary: #e5e5e5;
--color-border-secondary: #e5e5e5;
--color-border-tertiary: #f0f0f0;
--color-background-primary: #ffffff;
--color-background-secondary: #fafafa;
--color-text-success: #059669;
--color-text-warning: #d97706;
--color-text-error: #dc2626;
}
</style>
</head>
<body>
<div id="widget-container">%%WIDGET_CODE%%</div>
<script>
window._widgetRendered = false;
</script>
%%INJECTED_SCRIPTS%%
<script>
(function() {
// Disable Chart.js animations globally
if (typeof Chart !== 'undefined') {
const orig = Chart.defaults;
if (orig.animation) orig.animation.duration = 0;
if (orig.animations) orig.animations.duration = 0;
}
function signalDone() {
window._widgetRendered = true;
if (window.parent) {
try { window.parent.postMessage({ type: 'XWX_WIDGET_READY' }, '*'); } catch(e) {}
}
}
if (document.getElementById('widget-container').innerHTML.includes('canvas')) {
setTimeout(signalDone, 1500);
} else {
requestAnimationFrame(function() { setTimeout(signalDone, 500); });
}
})();
</script>
</body>
</html>
|