-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
154 lines (136 loc) · 6.17 KB
/
index.html
File metadata and controls
154 lines (136 loc) · 6.17 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
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ethereum Consensus Specifications</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="styles.css">
<!-- Apply dark mode immediately to prevent flash of light content -->
<script>
(function() {
var saved = localStorage.getItem('ethspec-tools-dark-mode');
var isDark = saved !== null ? saved === 'true' : window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDark) {
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
</script>
<!-- Prism for syntax highlighting (Python for specs, YAML for tests) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- JSZip for creating zip files (tests download) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<!-- jsdiff for spec version comparison -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/8.0.2/diff.min.js"></script>
</head>
<body>
<header class="header-container">
<div class="header-left">
<!-- Hamburger menu for mobile -->
<button id="menuToggle" class="menu-toggle" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<i class="fab fa-ethereum mobile-logo" aria-hidden="true"></i>
<h1>Ethereum Consensus Specifications</h1>
<select id="versionSelect" class="version-select" aria-label="Select version">
<option value="">Loading...</option>
</select>
<button id="versionChangelogBtn" class="version-changelog-btn mode-specs-only" disabled title="Loading...">
<i class="fas fa-bolt"></i> <span class="version-changelog-text">What Changed</span>
</button>
</div>
<div class="header-right">
<!-- Mode toggle -->
<div class="mode-toggle" role="group" aria-label="Mode toggle">
<button id="modeSpecs" class="mode-toggle-btn active" data-mode="specs">Specs</button>
<button id="modeTests" class="mode-toggle-btn" data-mode="tests">Tests</button>
</div>
<!-- Dark mode toggle -->
<div class="toggle-container" role="group" aria-label="Theme toggle">
<i class="fas fa-sun" aria-hidden="true"></i>
<label class="toggle-switch" for="darkModeToggle">
<input type="checkbox" id="darkModeToggle" aria-label="Toggle dark mode">
<span class="toggle-slider" aria-hidden="true"></span>
</label>
<i class="fas fa-moon" aria-hidden="true"></i>
</div>
</div>
</header>
<div class="main-container">
<!-- Sidebar overlay (mobile) -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar navigation -->
<aside class="sidebar" id="sidebar">
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search..." aria-label="Search">
<button id="searchClear" class="hidden" aria-label="Clear search">×</button>
</div>
<div class="file-filter mode-specs-only" id="specsFileFilter">
<input type="text" id="fileFilterInput"
placeholder="Filter by file..." aria-label="Filter by source file"
autocomplete="off" spellcheck="false">
<button id="fileFilterClear" class="file-filter-clear hidden"
aria-label="Clear file filter">×</button>
<div id="fileFilterDropdown" class="file-filter-dropdown hidden"></div>
</div>
<!-- Specs sidebar content -->
<div id="specsSidebar" class="mode-sidebar mode-specs-only">
<div class="fork-filters" id="specsForkFilters"></div>
<div class="type-filters" id="specsTypeFilters"></div>
<div class="tree-container" id="specsTree"></div>
</div>
<!-- Tests sidebar content -->
<div id="testsSidebar" class="mode-sidebar mode-tests-only">
<div class="preset-filters" id="testsPresetFilters"></div>
<div class="fork-filters" id="testsForkFilters"></div>
<div class="runner-filters" id="testsRunnerFilters"></div>
<div class="tree-container" id="testsTree"></div>
</div>
</aside>
<!-- Resize handle -->
<div class="resize-handle" id="resizeHandle"></div>
<!-- Main content area -->
<main class="content">
<!-- Welcome screen -->
<div id="welcome" class="welcome-screen">
<h2>Welcome</h2>
<p>Select an item from the navigation tree to view its details.</p>
</div>
<!-- Spec viewer (specs mode) -->
<div id="specViewer" class="spec-viewer hidden">
<div class="spec-header">
<h2 id="specTitle"></h2>
</div>
<div class="breadcrumb" id="specBreadcrumb"></div>
<div id="specContent" class="spec-content"></div>
</div>
<!-- Test viewer (tests mode) -->
<div id="testViewer" class="test-viewer hidden">
<div class="test-header">
<h2 id="testTitle"></h2>
<button id="downloadTestButton" class="download-test-button" title="Download test as zip">
<i class="fas fa-download"></i> Download Test
</button>
<button id="copyTestLinkButton" class="copy-test-link-button" title="Copy link to test">
<i class="fas fa-link"></i>
</button>
</div>
<div class="breadcrumb" id="testBreadcrumb"></div>
<div id="testContent" class="test-content"></div>
</div>
<!-- Loading state -->
<div id="loading" class="loading hidden">
<i class="fas fa-spinner fa-spin"></i>
<span>Loading data...</span>
</div>
<!-- Error state -->
<div id="error" class="error-message hidden"></div>
</main>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>