Skip to content

Commit 92279f5

Browse files
jefBinomedjefBinomed
committed
demo: add demo for qrcode
1 parent b1b5292 commit 92279f5

File tree

2 files changed

+302
-0
lines changed

2 files changed

+302
-0
lines changed

‎demo/markdown/10-helpers/50_qrcodes.md‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
<!-- .slide: class="transition" -->
2+
3+
# QRCodes
4+
5+
##==##
6+
7+
# You can include QR Code to your slides
8+
9+
You can put QR Codes with plain text in it (URL, text, everything that is inline text for this version)
10+
11+
!!! warning
12+
When you use QR Code, please think at the accessibility of the data you expose ! The QR Code should not be the only way to share your information
13+
!!!
14+
15+
The qrcode is inline (it's an img). text to produce :
16+
17+
`![](TEXT_TO_ENCODE 'tc-qrcode somesCssClasses')`
18+
19+
##==##
20+
21+
# Some examples
22+
23+
<div class="flex-row">
24+
25+
![](test 'tc-qrcode h-200') some text
26+
27+
![](test 'tc-qrcode h-200 text-above') some text above
28+
29+
![](test 'tc-qrcode h-200 text-below') some text below
30+
31+
![](test 'tc-qrcode h-200 text-left') some text left
32+
33+
</div>
34+
35+
##--##
36+
37+
<!-- .slide: class="with-code" -->
38+
39+
# Code to produce / Markdown
40+
41+
```markdown
42+
# Some examples
43+
44+
<div class="flex-row">
45+
![](test 'tc-qrcode h-200') some text
46+
![](test 'tc-qrcode h-200 text-above') some text above
47+
![](test 'tc-qrcode h-200 text-below') some text below
48+
![](test 'tc-qrcode h-200 text-left') some text left
49+
</div>
50+
```
51+
52+
<!-- .element: class="big-code" -->
53+
54+
##==##
55+
56+
<!-- .slide: class="tc-multiple-columns" -->
57+
58+
##++##
59+
60+
# Somes meta examples
61+
62+
## VCard
63+
64+
<br><br>
65+
66+
```
67+
BEGIN:VCARD
68+
VERSION:3.0
69+
N:Lastname;Firstname
70+
FN:Firstname Lastname
71+
ORG:CompanyName
72+
TITLE:JobTitle
73+
ADR:;;123 Sesame St;SomeCity;CA;12345;USA
74+
TEL;WORK;VOICE:1234567890
75+
TEL;CELL:Mobile
76+
TEL;FAX:
77+
EMAIL;WORK;INTERNET:[email protected]
78+
URL:http://website.com
79+
END:VCARD
80+
```
81+
82+
##++##
83+
84+
##++##
85+
86+
![](BEGIN:VCARD VERSION:3.0 N:Lastname;Firstname FN:Firstname Lastname ORG:CompanyName TITLE:JobTitle ADR:;;123 Sesame St;SomeCity;CA;12345;USA TEL;WORK;VOICE:1234567890 TEL;CELL:Mobile TEL;FAX: EMAIL;WORK; INTERNET:foo@email.com URL:http://website.com END:VCARD 'tc-qrcode h-500')
87+
88+
<!-- .element: class="full-center" -->
89+
90+
##++##
91+
92+
##--##
93+
94+
<!-- .slide: class="with-code" -->
95+
96+
# Code to produce / Markdown
97+
98+
```markdown
99+
![](BEGIN:VCARD VERSION:3.0 N:Lastname;Firstname FN:Firstname Lastname ORG:CompanyName TITLE:JobTitle ADR:;;123 Sesame St;SomeCity;CA;12345;USA TEL;WORK;VOICE:1234567890 TEL;CELL:Mobile TEL;FAX: EMAIL;WORK; INTERNET:[email protected] URL:http://website.com END:VCARD 'tc-qrcode h-500')
100+
```
101+
102+
<!-- .element: class="big-code" -->
103+
104+
##==##
105+
106+
<!-- .slide: class="tc-multiple-columns" -->
107+
108+
##++##
109+
110+
# Somes meta examples
111+
112+
## V Calendar
113+
114+
<br><br>
115+
116+
```
117+
BEGIN:VCALENDAR
118+
VERSION:2.0
119+
BEGIN:VEVENT
120+
SUMMARY:Event Title
121+
DTSTART:Start Date and Time
122+
DTEND:End Date and Time
123+
LOCATION:Event Location
124+
DESCRIPTION:Event Description
125+
END:VEVENT
126+
END:VCALENDAR
127+
```
128+
129+
##++##
130+
131+
##++##
132+
133+
![](BEGIN:VCALENDAR VERSION:2.0 BEGIN:VEVENT SUMMARY:Event Title DTSTART:Start Date and Time DTEND:End Date and Time LOCATION:Event Location DESCRIPTION:Event Description END:VEVENT END:VCALENDAR 'tc-qrcode h-500')
134+
135+
<!-- .element: class="full-center" -->
136+
137+
##++##
138+
139+
##--##
140+
141+
<!-- .slide: class="with-code" -->
142+
143+
# Code to produce / Markdown
144+
145+
```markdown
146+
![](BEGIN:VCALENDAR VERSION:2.0 BEGIN:VEVENT SUMMARY:Event Title DTSTART:Start Date and Time DTEND:End Date and Time LOCATION:Event Location DESCRIPTION:Event Description END:VEVENT END:VCALENDAR 'tc-qrcode h-500')
147+
```
148+
149+
<!-- .element: class="big-code" -->
150+
151+
##==##
152+
153+
<!-- .slide: class="tc-multiple-columns" -->
154+
155+
##++##
156+
157+
# Somes meta examples
158+
159+
## Emails
160+
161+
<br><br>
162+
163+
```
164+
mailto:email_address?subject=email_subject&body=email_body
165+
```
166+
167+
##++##
168+
169+
##++##
170+
171+
![](mailto:email_address?subject=email_subject&body=email_body 'tc-qrcode h-500')
172+
173+
<!-- .element: class="full-center" -->
174+
175+
##++##
176+
177+
##--##
178+
179+
<!-- .slide: class="with-code" -->
180+
181+
# Code to produce / Markdown
182+
183+
```markdown
184+
![](mailto:email_address?subject=email_subject&body=email_body 'tc-qrcode h-500')
185+
```
186+
187+
<!-- .element: class="big-code" -->
188+
189+
##==##
190+
191+
<!-- .slide: class="tc-multiple-columns" -->
192+
193+
##++##
194+
195+
# Somes meta examples
196+
197+
## Geo Format
198+
199+
<br><br>
200+
201+
```
202+
geo:latitude,longitude,altitude
203+
```
204+
205+
##++##
206+
207+
##++##
208+
209+
![](geo:latitude,longitude,altitude 'tc-qrcode h-500')
210+
211+
<!-- .element: class="full-center" -->
212+
213+
##++##
214+
215+
##--##
216+
217+
<!-- .slide: class="with-code" -->
218+
219+
# Code to produce / Markdown
220+
221+
```markdown
222+
![](geo:latitude,longitude,altitude 'tc-qrcode h-500')
223+
```
224+
225+
<!-- .element: class="big-code" -->
226+
227+
##==##
228+
229+
<!-- .slide: class="tc-multiple-columns" -->
230+
231+
##++##
232+
233+
# Somes meta examples
234+
235+
## SMS
236+
237+
<br><br>
238+
239+
```
240+
smsto:phone_number:message
241+
```
242+
243+
##++##
244+
245+
##++##
246+
247+
![](smsto:phone_number:message 'tc-qrcode h-500')
248+
249+
<!-- .element: class="full-center" -->
250+
251+
##++##
252+
253+
##--##
254+
255+
<!-- .slide: class="with-code" -->
256+
257+
# Code to produce / Markdown
258+
259+
```markdown
260+
![](smsto:phone_number:message 'tc-qrcode h-500')
261+
```
262+
263+
<!-- .element: class="big-code" -->
264+
265+
##==##
266+
267+
<!-- .slide: class="tc-multiple-columns" -->
268+
269+
##++##
270+
271+
# Somes meta examples
272+
273+
## WIFI
274+
275+
<br><br>
276+
277+
```
278+
WIFI:T:network_type;S:network_name;P:password;H:hidden;;
279+
```
280+
281+
##++##
282+
283+
##++##
284+
285+
![](WIFI:T:network_type;S:network_name;P:password;H:hidden;; 'tc-qrcode h-500')
286+
287+
<!-- .element: class="full-center" -->
288+
289+
##++##
290+
291+
##--##
292+
293+
<!-- .slide: class="with-code" -->
294+
295+
# Code to produce / Markdown
296+
297+
```markdown
298+
![](WIFI:T:network_type;S:network_name;P:password;H:hidden;; 'tc-qrcode h-500')
299+
```
300+
301+
<!-- .element: class="big-code" -->

‎demo/scripts/slides.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ function helpersSlides() {
4040
`${dir}/20_icons.md`,
4141
`${dir}/30_admonitions.md`,
4242
`${dir}/40_quotes.md`,
43+
`${dir}/50_qrcodes.md`,
4344
];
4445
}
4546

0 commit comments

Comments
 (0)