1- <!DOCTYPE html>
1+ <!doctype html>
22< html >
3- < head >
3+ < head >
44 < title > Test GitHub QR Code</ title >
55 < style >
6- body {
7- display : flex;
8- justify-content : center;
9- align-items : center;
10- min-height : 100vh ;
11- margin : 0 ;
12- background : # f0f0f0 ;
13- font-family : system-ui, -apple-system, sans-serif;
14- }
15- .container {
16- text-align : center;
17- background : white;
18- padding : 40px ;
19- border-radius : 10px ;
20- box-shadow : 0 4px 6px rgba (0 , 0 , 0 , 0.1 );
21- }
22- h1 { color : # 333 ; margin-bottom : 10px ; }
23- p { color : # 666 ; margin-bottom : 30px ; }
24- .qr-wrapper {
25- display : inline-block;
26- padding : 20px ;
27- background : white;
28- border : 2px solid # ddd ;
29- border-radius : 8px ;
30- }
6+ body {
7+ display : flex;
8+ justify-content : center;
9+ align-items : center;
10+ min-height : 100vh ;
11+ margin : 0 ;
12+ background : # f0f0f0 ;
13+ font-family :
14+ system-ui,
15+ -apple-system,
16+ sans-serif;
17+ }
18+ .container {
19+ text-align : center;
20+ background : white;
21+ padding : 40px ;
22+ border-radius : 10px ;
23+ box-shadow : 0 4px 6px rgba (0 , 0 , 0 , 0.1 );
24+ }
25+ h1 {
26+ color : # 333 ;
27+ margin-bottom : 10px ;
28+ }
29+ p {
30+ color : # 666 ;
31+ margin-bottom : 30px ;
32+ }
33+ .qr-wrapper {
34+ display : inline-block;
35+ padding : 20px ;
36+ background : white;
37+ border : 2px solid # ddd ;
38+ border-radius : 8px ;
39+ }
3140 </ style >
32- </ head >
33- < body >
41+ </ head >
42+ < body >
3443 < div class ="container ">
35- < h1 > GitHub URL QR Code Test</ h1 >
36- < p > URL: https://github.com/devmehq/react-qr-code</ p >
37- < p > This should be scannable and open the GitHub repo</ p >
38-
44+ < h1 > GitHub URL QR Code Test</ h1 >
45+ < p > URL: https://github.com/devmehq/react-qr-code</ p >
46+ < p > This should be scannable and open the GitHub repo</ p >
47+
48+ < div class ="qr-wrapper ">
49+ < div id ="qr-basic "> </ div >
50+ </ div >
51+
52+ < div style ="margin-top: 30px ">
53+ < h3 > With higher error correction:</ h3 >
3954 < div class ="qr-wrapper ">
40- < div id ="qr-basic "> </ div >
41- </ div >
42-
43- < div style ="margin-top: 30px; ">
44- < h3 > With higher error correction:</ h3 >
45- < div class ="qr-wrapper ">
46- < div id ="qr-high "> </ div >
47- </ div >
55+ < div id ="qr-high "> </ div >
4856 </ div >
49-
50- < div style =" margin-top: 30px; " >
51- < h3 > Larger size (better for scanning): </ h3 >
52- < div class =" qr-wrapper " >
53- < div id ="qr-large " > </ div >
54- </ div >
57+ </ div >
58+
59+ < div style =" margin-top: 30px " >
60+ < h3 > Larger size (better for scanning): </ h3 >
61+ < div class ="qr-wrapper " >
62+ < div id =" qr-large " > </ div >
5563 </ div >
64+ </ div >
5665 </ div >
5766
58- < script crossorigin src ="https://unpkg.com/react@18/umd/react.production.min.js "> </ script >
59- < script crossorigin src ="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js "> </ script >
67+ < script
68+ crossorigin
69+ src ="https://unpkg.com/react@18/umd/react.production.min.js "
70+ > </ script >
71+ < script
72+ crossorigin
73+ src ="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js "
74+ > </ script >
6075 < script src ="../dist/index.umd.js "> </ script >
61-
76+
6277 < script >
63- const { ReactQrCode } = window . ReactQrCode ;
64- const e = React . createElement ;
65-
66- // Basic QR (same as in examples)
67- const root1 = ReactDOM . createRoot ( document . getElementById ( 'qr-basic' ) ) ;
68- root1 . render ( e ( ReactQrCode , {
69- value : "https://github.com/devmehq/react-qr-code" ,
70- size : 140 ,
71- bgColor : "#ffffff" ,
72- fgColor : "#000000" ,
73- level : "L"
74- } ) ) ;
75-
76- // High error correction
77- const root2 = ReactDOM . createRoot ( document . getElementById ( 'qr-high' ) ) ;
78- root2 . render ( e ( ReactQrCode , {
79- value : "https://github.com/devmehq/react-qr-code" ,
80- size : 140 ,
81- bgColor : "#ffffff" ,
82- fgColor : "#000000" ,
83- level : "H"
84- } ) ) ;
85-
86- // Larger size for better scanning
87- const root3 = ReactDOM . createRoot ( document . getElementById ( 'qr-large' ) ) ;
88- root3 . render ( e ( ReactQrCode , {
89- value : "https://github.com/devmehq/react-qr-code" ,
90- size : 256 ,
91- bgColor : "#ffffff" ,
92- fgColor : "#000000" ,
93- level : "M" ,
94- includeMargin : true
95- } ) ) ;
78+ const { ReactQrCode } = window . ReactQrCode
79+ const e = React . createElement
80+
81+ // Basic QR (same as in examples)
82+ const root1 = ReactDOM . createRoot ( document . getElementById ( 'qr-basic' ) )
83+ root1 . render (
84+ e ( ReactQrCode , {
85+ value : 'https://github.com/devmehq/react-qr-code' ,
86+ size : 140 ,
87+ bgColor : '#ffffff' ,
88+ fgColor : '#000000' ,
89+ level : 'L' ,
90+ } )
91+ )
92+
93+ // High error correction
94+ const root2 = ReactDOM . createRoot ( document . getElementById ( 'qr-high' ) )
95+ root2 . render (
96+ e ( ReactQrCode , {
97+ value : 'https://github.com/devmehq/react-qr-code' ,
98+ size : 140 ,
99+ bgColor : '#ffffff' ,
100+ fgColor : '#000000' ,
101+ level : 'H' ,
102+ } )
103+ )
104+
105+ // Larger size for better scanning
106+ const root3 = ReactDOM . createRoot ( document . getElementById ( 'qr-large' ) )
107+ root3 . render (
108+ e ( ReactQrCode , {
109+ value : 'https://github.com/devmehq/react-qr-code' ,
110+ size : 256 ,
111+ bgColor : '#ffffff' ,
112+ fgColor : '#000000' ,
113+ level : 'M' ,
114+ includeMargin : true ,
115+ } )
116+ )
96117 </ script >
97- </ body >
98- </ html >
118+ </ body >
119+ </ html >
0 commit comments