Current section
Files
Jump to
Current section
Files
priv/template.html.eex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reach — <%= module || file || "Graph" %></title>
<style>
<%= vue_flow_css %>
<%= makeup_css %>
/* Reach graph layout */
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.reach-container { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: #f1f5f9; }
.tab-bar { display: flex; align-items: center; padding: 0 16px; background: #1e293b; flex-shrink: 0; }
.tab-bar-tabs { display: flex; gap: 0; }
.tab { padding: 10px 20px; border: none; background: transparent; color: #94a3b8; font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.tab:hover { color: #e2e8f0; }
.tab.active { color: #f8fafc; border-bottom-color: #3b82f6; }
.main-area { display: flex; flex: 1; overflow: hidden; }
.sidebar { width: 240px; background: #fff; border-right: 1px solid #e2e8f0; overflow-y: auto; flex-shrink: 0; font-size: 12px; }
.sidebar-title { padding: 10px 12px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.sidebar-module { padding: 0; }
.sidebar-module-name { padding: 6px 12px; font-weight: 600; color: #334155; font-size: 11px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
.sidebar-func { display: block; width: 100%; text-align: left; padding: 4px 12px 4px 20px; border: none; background: none; color: #475569; font-size: 12px; font-family: ui-monospace, SFMono-Regular, monospace; cursor: pointer; }
.sidebar-func:hover { background: #f1f5f9; }
.sidebar-func.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.sidebar-preamble { padding: 4px 12px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: #64748b; line-height: 1.5; border-bottom: 1px solid #f1f5f9; white-space: pre; overflow-x: hidden; text-overflow: ellipsis; }
.attr-name { color: #7c3aed; }
.attr-value { color: #64748b; }
.reach-flow { flex: 1; }
/* Code node styling */
.code-node { border: 2px solid #94a3b8; border-radius: 6px; background: #fff; min-width: 180px; max-width: 600px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); overflow: hidden; }
.vue-flow__node.highlighted .code-node { box-shadow: 0 0 0 3px #3b82f6, 0 2px 8px rgba(59,130,246,0.3); }
.has-selection .vue-flow__node:not(.highlighted) { opacity: 0.35; transition: opacity 0.2s; }
.has-selection .vue-flow__node.highlighted { opacity: 1; transition: opacity 0.2s; }
.code-node-header { padding: 4px 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.code-node-body { padding: 0; background: #fafafa; }
.code-table { border-collapse: collapse; width: 100%; }
.code-table tr:hover { background: #f1f5f9; }
.line-number { color: #94a3b8; text-align: right; padding: 0 8px 0 6px; user-select: none; white-space: nowrap; border-right: 1px solid #e2e8f0; background: #f8fafc; vertical-align: top; font-size: 11px; }
.line-code { padding: 0 8px; white-space: pre; vertical-align: top; user-select: text; cursor: text; }
.code-node-body { } .code-node-body .highlight { background: transparent; }
.compact-node { padding: 6px 12px; border: 1.5px solid #94a3b8; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; white-space: nowrap; }
.compact-label { font-weight: 500; }
.code-node-body pre { margin: 0; padding: 0; background: transparent; }
.code-node-body .kd { color: #008000; font-weight: bold; }
</style>
</head>
<body>
<div id="app"></div>
<script>window.graphData = <%= graph_json %></script>
<script><%= elk_bundle %></script>
<script><%= js_bundle %></script>
</body>
</html>