1+ <!DOCTYPE html>
2+ < html lang ="en-US ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > SimplePDFviewer Test - CDN Loading</ title >
7+ < style type ="text/css ">
8+ body { font-family : Arial, sans-serif; margin : 20px ; }
9+ # viewer { height : 80dvh ; border : 1px solid # ccc
10+ .info { background : # f0f0f0padding : 10px ; margin-bottom : 20px ; border-radius : 4px ; }
11+ .error { color : # d32f2f
12+ .success { color : # 388e3c
13+ code { background : # f5f5f5padding : 2px 4px ; border-radius : 3px ; }
14+ .controls { margin-bottom : 20px ; }
15+ .controls button {
16+ padding : 8px 15px ;
17+ margin-right : 10px ;
18+ cursor : pointer;
19+ border : 1px solid # ccc
20+ border-radius : 4px ;
21+ background : # f0f0f0
22+ }
23+ .controls button : hover { background : # e0e0e0
24+ .controls input {
25+ padding : 8px ;
26+ margin-right : 10px ;
27+ border : 1px solid # ccc
28+ border-radius : 4px ;
29+ width : 120px ;
30+ }
31+ </ style >
32+ </ head >
33+ < body >
34+ < h1 > SimplePDFviewer Test</ h1 >
35+ < div class ="info ">
36+ < p >
37+ Loading SimplePDFviewer from CDN: < code > http://localhost:8001/core.min.js</ code >
38+ </ p >
39+ < p id ="status "> Loading...</ p >
40+ </ div >
41+
42+ < div class ="controls ">
43+ < h3 > Theme Customization (Optional)</ h3 >
44+ < input type ="text " id ="colorInput " placeholder ="e.g. #3498DB " value ="#3498DB ">
45+ < button onclick ="changeTheme() "> Change Theme</ button >
46+ < button onclick ="changeTheme('#3498DB') "> Blue (Default)</ button >
47+ < button onclick ="changeTheme('#E91E63') "> Pink</ button >
48+ < button onclick ="changeTheme('#4CAF50') "> Green</ button >
49+ < button onclick ="changeTheme('#FF9800') "> Orange</ button >
50+ < button onclick ="changeTheme('#9C27B0') "> Purple</ button >
51+ </ div >
52+
53+ < div id ="viewer "> </ div >
54+
55+ <!-- Change the path to your core.min.js file or to the online CDN(see README) -->
56+ < script type ="text/javascript " src ="http://localhost:8001/core.min.js "> </ script >
57+
58+ < script type ="text/javascript ">
59+ let viewer = null ;
60+ const COLOR_STORAGE_KEY = 'pdfViewer_theme' ;
61+ const DEFAULT_COLOR = '#3498DB' ;
62+
63+ function changeTheme ( color ) {
64+ if ( ! viewer ) {
65+ alert ( 'Viewer not initialized yet' ) ;
66+ return ;
67+ }
68+ const colorInput = document . getElementById ( 'colorInput' ) ;
69+ if ( color ) {
70+ colorInput . value = color ;
71+ }
72+ const colorValue = colorInput . value || DEFAULT_COLOR ;
73+ const success = viewer . setTheme ( colorValue ) ;
74+ if ( success ) {
75+ localStorage . setItem ( COLOR_STORAGE_KEY , colorValue ) ;
76+ alert ( `Theme changed to ${ colorValue } ) ;
77+ } else {
78+ alert ( `Invalid color: ${ colorValue } ) ;
79+ }
80+ }
81+
82+ function getSavedTheme ( ) {
83+ const saved = localStorage . getItem ( COLOR_STORAGE_KEY ) ;
84+ return saved && / ^ # [ 0 - 9 A - F a - f ] { 6 } $ / . test ( saved ) ? saved : DEFAULT_COLOR ;
85+ }
86+
87+ function initializeViewer ( ) {
88+ if ( typeof PDFViewer === 'undefined' ) {
89+ document . getElementById ( 'status' ) . innerHTML = `
90+ <span class="error">PDFViewer library not loaded</span>
91+ ` ;
92+ return ;
93+ }
94+
95+ document . getElementById ( 'status' ) . innerHTML = `
96+ <span class="success">SimplePDFviewer loaded from CDN successfully</span>
97+ ` ;
98+
99+ const savedTheme = getSavedTheme ( ) ;
100+ const colorInput = document . getElementById ( 'colorInput' ) ;
101+ colorInput . value = savedTheme ;
102+
103+ fetch ( 'course.json' )
104+ . then ( response => response . json ( ) )
105+ . then ( course => {
106+ viewer = PDFViewer . init (
107+ document . getElementById ( 'viewer' ) ,
108+ course ,
109+ {
110+ colorTheme : savedTheme ,
111+ onError : ( error ) => {
112+ console . error ( 'Viewer error:' , error ) ;
113+ document . getElementById ( 'status' ) . innerHTML += `
114+ <br><span class="error">
115+ Viewer Error: ${ error . message }
116+ </span>` ;
117+ }
118+ }
119+ ) ;
120+ if ( viewer ) {
121+ colorInput . value = savedTheme ;
122+ document . getElementById ( 'status' ) . innerHTML += `
123+ <br><span class="success">
124+ Viewer initialized successfully (Theme: ${ savedTheme }
125+ </span>` ;
126+ } else {
127+ document . getElementById ( 'status' ) . innerHTML += `
128+ <br><span class="error">
129+ Failed to initialize viewer
130+ </span>` ;
131+ }
132+ } )
133+ . catch ( err => {
134+ console . error ( 'Error loading course:' , err ) ;
135+ document . getElementById ( 'status' ) . innerHTML += `
136+ <br><span class="error">
137+ Error loading course: ${ err . message }
138+ </span>` ;
139+ document . getElementById ( 'viewer' ) . innerHTML = `
140+ <p style="color:red">
141+ Error loading course. Check browser console for details.
142+ </p>` ;
143+ } ) ;
144+ }
145+
146+ if ( document . readyState === 'loading' ) {
147+ document . addEventListener ( 'DOMContentLoaded' , initializeViewer ) ;
148+ } else {
149+ initializeViewer ( ) ;
150+ }
151+ </ script >
152+ </ body >
153+ </ html >
0 commit comments