|
2 | 2 | <html> |
3 | 3 |
|
4 | 4 | <head> |
| 5 | + <meta charset="UTF-8"> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 7 | + <meta http-equiv="Content-Security-Policy" |
| 8 | + content="default-src 'none'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; connect-src 'self'"> |
5 | 9 | <title>Data Browser</title> |
6 | | - <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css"> |
7 | | - <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
8 | | - <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> |
| 10 | + |
| 11 | + <!-- Theme init: runs before body renders to avoid flash of wrong theme --> |
| 12 | + <script> |
| 13 | + (function () { |
| 14 | + var saved = localStorage.getItem('data-viewer:theme') |
| 15 | + if (saved) { |
| 16 | + if (saved === 'light') document.documentElement.dataset.theme = 'light' |
| 17 | + } else if (window.matchMedia('(prefers-color-scheme: light)').matches) { |
| 18 | + document.documentElement.dataset.theme = 'light' |
| 19 | + } |
| 20 | + })() |
| 21 | + </script> |
| 22 | + |
| 23 | + <script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.prod.js" |
| 24 | + integrity="sha384-6pS1WSZJY7wOk6qQTa9C9U2W1/qzqL7iYoMil7qn9KFeN5fZDAwIExgCd7U5AH+X" |
| 25 | + crossorigin="anonymous"></script> |
| 26 | + <script src="https://cdn.jsdelivr.net/npm/axios@1.6.8/dist/axios.min.js" |
| 27 | + integrity="sha384-ftvHQsVsFt/CYVdJ1acqn4sKGIZ77bziRNFfeph9Ww9C4vQa5zY/ev4cfR5vyYrZ" |
| 28 | + crossorigin="anonymous"></script> |
| 29 | + |
9 | 30 | <script src="app.js" defer></script> |
10 | 31 |
|
11 | 32 | <style> |
12 | | - th { position: sticky; top:0; z-index: 2; background-color: white; } |
13 | | - .noscroll { overflow: hidden; } |
14 | | - .hovering tr:hover td { background: #ebeefc; cursor: pointer; } |
15 | | - .highlight { background: #ebeefc !important; } |
16 | | - .rating-stars { color:teal } |
17 | | - .succeeded { color:teal } |
18 | | - .failed { color:red } |
19 | | - .condensed { max-width: 100px; text-overflow: ellipsis; white-space: nowrap; } |
20 | | - .key { font-weight: bold } |
21 | | - .not-key { font-weight: lighter;} |
22 | | - .with-sidebar { display: flex; flex-wrap: wrap; gap: 1rem; } |
23 | | - .sidebar { flex-basis: 20rem; flex-grow: 1; } |
24 | | - .sidebar-main { height: 100vh; overflow-y: scroll; } |
25 | | - .not-sidebar { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; align-items: stretch;} |
26 | | - .not-sidebar-main { max-height: 40vh; overflow-y: scroll; } |
27 | | - .not-sidebar-sub { max-height: 40vh; overflow-y: scroll; } |
28 | | - .horizontal label { display: inline; } |
29 | | - .horizontal input { width: initial; display: inline; } |
30 | | - .error { color: red; } |
| 33 | + /* placeholder — styles added in Task 2 */ |
31 | 34 | </style> |
32 | 35 | </head> |
33 | 36 |
|
|
0 commit comments