1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
+ < title > GramFrame Release Test</ title >
7
+ < style >
8
+ body { font-family : Arial, sans-serif; margin : 20px ; }
9
+ .test-container { margin : 20px 0 ; }
10
+ .note { background : # e8f4fd ; padding : 15px ; border-left : 4px solid # 0366d6 ; margin : 10px 0 ; }
11
+ </ style >
12
+ </ head >
13
+ < body >
14
+ < h1 > GramFrame Release Test</ h1 >
15
+
16
+ < div class ="note ">
17
+ < strong > Ready to use:</ strong > This file works when opened directly from your file system.
18
+ Just double-click from Windows Explorer or macOS Finder - no web server required!
19
+ </ div >
20
+
21
+ < div class ="test-container ">
22
+ < h2 > Test Configuration</ h2 >
23
+ < table class ="gram-config ">
24
+ < tr >
25
+ < td colspan ="2 "> < img src ="./mock-gram.png " alt ="Mock Spectrogram " style ="width: 800px; height: 400px; "> </ td >
26
+ </ tr >
27
+ < tr > < td > time-start</ td > < td > 0</ td > </ tr >
28
+ < tr > < td > time-end</ td > < td > 10</ td > </ tr >
29
+ < tr > < td > freq-start</ td > < td > 0</ td > </ tr >
30
+ < tr > < td > freq-end</ td > < td > 50</ td > </ tr >
31
+ </ table >
32
+ </ div >
33
+
34
+ < div class ="note ">
35
+ < strong > Test Instructions:</ strong >
36
+ < ol >
37
+ < li > Verify the spectrogram component loads above</ li >
38
+ < li > Test mouse hover for cursor display</ li >
39
+ < li > Try switching modes (Cross Cursor, Harmonics, Doppler, Pan)</ li >
40
+ < li > Test marker creation by clicking in Cross Cursor mode</ li >
41
+ </ ol >
42
+ </ div >
43
+
44
+ <!-- Load GramFrame component -->
45
+ < script src ="./gramframe.bundle.js "> </ script >
46
+ </ body >
47
+ </ html >
0 commit comments