forked from amureki/django-devbar
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpanel.html
More file actions
84 lines (77 loc) · 4.65 KB
/
panel.html
File metadata and controls
84 lines (77 loc) · 4.65 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Django DevBar</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #333; background: #f5f5f5; padding: 8px; }
.empty-state { text-align: center; padding: 32px 16px; color: #666; }
.empty-state h2 { font-size: 13px; margin-bottom: 6px; }
.empty-state p { font-size: 11px; color: #999; }
.code { font-family: monospace; background: #eee; padding: 1px 4px; border-radius: 2px; }
.current { background: #fff; border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.req-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.request-url { color: #1a73e8; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-method { padding: 1px 4px; border-radius: 2px; background: #e8f0fe; color: #1a73e8; font-weight: 600; font-size: 10px; flex-shrink: 0; }
.request-type { padding: 1px 3px; border-radius: 2px; font-weight: 600; font-size: 9px; flex-shrink: 0; }
.type-page { background: #cce5ff; color: #004085; }
.type-doc { background: #d4edda; color: #155724; }
.type-xhr { background: #e2e3e5; color: #6c757d; }
.metrics { display: flex; gap: 12px; flex-shrink: 0; }
.metric { display: inline-flex; align-items: baseline; gap: 3px; }
.metric-label { color: #888; font-size: 10px; }
.metric-unit { color: #999; font-size: 10px; }
.dup-warn { color: #d97706; font-weight: 500; }
.dups { background: #fffbeb; border-left: 2px solid #f59e0b; padding: 6px 8px; margin-bottom: 8px; border-radius: 0 4px 4px 0; }
.dup { margin-bottom: 4px; font-size: 10px; }
.dup:last-child { margin-bottom: 0; }
.dup code { color: #333; word-break: break-all; }
.dup-time { color: #d97706; font-weight: 500; margin-left: 4px; }
.history { margin-top: 8px; max-height: 300px; overflow-y: auto; }
.history-title { font-weight: 500; margin-bottom: 6px; color: #666; font-size: 10px; text-transform: uppercase; position: sticky; top: 0; background: #f5f5f5; padding: 2px 0; }
.hist-row { background: #fff; border-radius: 3px; padding: 5px 8px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.hist-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.hist-url { color: #1a73e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-stats { display: flex; gap: 12px; color: #666; font-size: 10px; flex-shrink: 0; }
.url-link { color: #666; text-decoration: none; margin-left: 4px; font-size: 11px; opacity: 0.7; transition: opacity 0.15s ease; }
.url-link:hover { opacity: 1; }
.controls { display: flex; align-items: center; justify-content: flex-end; padding: 4px 8px; margin-bottom: 4px; gap: 12px; }
.controls label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; cursor: pointer; user-select: none; }
.controls input[type="checkbox"] { cursor: pointer; }
.repo-link { font-size: 10px; color: #1a73e8; text-decoration: none; }
.repo-link:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
body { background: #1e1e1e; color: #e0e0e0; }
.empty-state { color: #999; }
.empty-state p { color: #666; }
.empty-state a { color: #6db3f2; }
.code { background: #333; color: #e0e0e0; }
.current, .hist-row { background: #2d2d2d; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.request-url, .hist-url { color: #6db3f2; }
.request-method { background: #1a3a5c; color: #6db3f2; }
.metric-label { color: #888; }
.hist-stats { color: #999; }
.dups { background: #2a2518; border-left-color: #f59e0b; }
.dup code { color: #e0e0e0; }
.type-page { background: #1e3a5f; color: #93c5fd; }
.type-doc { background: #1e3a2f; color: #6ee7b7; }
.type-xhr { background: #374151; color: #9ca3af; }
.history-title { color: #888; background: #1e1e1e; }
.controls label { color: #999; }
.repo-link { color: #6db3f2; }
.url-link { color: #999; }
}
</style>
</head>
<body>
<div class="controls">
<label>
<input type="checkbox" id="show-bar-toggle" checked>
Show <a href="https://github.com/amureki/django-devbar" target="_blank" class="repo-link">django-devbar</a> on page
</label>
</div>
<div id="app"></div>
<script type="module" src="panel.js"></script>
</body>
</html>