Skip to content

Commit fed993a

Browse files
loicleflochloiclefloch
committed
feat: qr code page
1 parent 895ad8f commit fed993a

2 files changed

Lines changed: 189 additions & 0 deletions

File tree

‎source/qr/index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: QR Code
3+
layout: qrcode
4+
---

‎themes/cactus/layout/qrcode.ejs‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<main class="qrcode-page">
2+
<div class="qrcode-container" id="qrcode-container">
3+
<p class="qrcode-subtitle">Scan to visit my blog</p>
4+
5+
<div class="qrcode-wrapper">
6+
<qr-code
7+
id="qr"
8+
contents="https://loiclefloch.fr"
9+
module-color="#c9cacc"
10+
position-ring-color="#93BEAE"
11+
position-center-color="#F4BF77"
12+
style="width: 400px; height: 400px; background-color: transparent;"
13+
></qr-code>
14+
</div>
15+
16+
<p class="qrcode-url">loiclefloch.fr</p>
17+
18+
<button class="qrcode-toggle" id="toggle-bg" aria-label="Toggle background color">
19+
<span class="toggle-icon">☀️</span>
20+
<span class="toggle-text">Light mode</span>
21+
</button>
22+
</div>
23+
</main>
24+
25+
<style>
26+
.qrcode-page {
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
min-height: 70vh;
31+
padding: 2rem;
32+
}
33+
34+
.qrcode-container {
35+
text-align: center;
36+
padding: 3rem;
37+
border-radius: 16px;
38+
transition: all 0.3s ease;
39+
}
40+
41+
.qrcode-container.light-mode {
42+
background-color: #ffffff;
43+
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
44+
}
45+
46+
.qrcode-title {
47+
font-size: 2rem;
48+
margin-bottom: 0.5rem;
49+
color: #c9cacc;
50+
font-weight: 600;
51+
}
52+
53+
.light-mode .qrcode-title {
54+
color: #1d1f21;
55+
}
56+
57+
.qrcode-subtitle {
58+
font-size: 1.1rem;
59+
color: #908d8d;
60+
margin-bottom: 2rem;
61+
}
62+
63+
.light-mode .qrcode-subtitle {
64+
color: #666;
65+
}
66+
67+
.qrcode-wrapper {
68+
display: flex;
69+
justify-content: center;
70+
margin: 2rem 0;
71+
}
72+
73+
.qrcode-url {
74+
font-size: 1.5rem;
75+
color: #93BEAE;
76+
font-weight: 500;
77+
letter-spacing: 0.5px;
78+
margin-top: 1.5rem;
79+
}
80+
81+
.light-mode .qrcode-url {
82+
color: #2a6f5a;
83+
}
84+
85+
.qrcode-toggle {
86+
margin-top: 2rem;
87+
padding: 0.75rem 1.5rem;
88+
border: 1px solid #908d8d;
89+
border-radius: 8px;
90+
background: transparent;
91+
color: #c9cacc;
92+
cursor: pointer;
93+
font-size: 0.9rem;
94+
display: inline-flex;
95+
align-items: center;
96+
gap: 0.5rem;
97+
transition: all 0.2s ease;
98+
}
99+
100+
.qrcode-toggle:hover {
101+
border-color: #93BEAE;
102+
color: #93BEAE;
103+
}
104+
105+
.light-mode .qrcode-toggle {
106+
border-color: #ccc;
107+
color: #333;
108+
}
109+
110+
.light-mode .qrcode-toggle:hover {
111+
border-color: #2a6f5a;
112+
color: #2a6f5a;
113+
}
114+
115+
/* Large size for projection - responsive scaling */
116+
@media (min-width: 768px) {
117+
.qrcode-wrapper qr-code {
118+
width: 500px !important;
119+
height: 500px !important;
120+
}
121+
}
122+
123+
@media (min-width: 1200px) {
124+
.qrcode-wrapper qr-code {
125+
width: 600px !important;
126+
height: 600px !important;
127+
}
128+
}
129+
130+
/* Fullscreen mode for projection */
131+
.qrcode-page:fullscreen,
132+
.qrcode-page:-webkit-full-screen {
133+
background: #040D12;
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
137+
}
138+
139+
.qrcode-page:fullscreen .qrcode-wrapper qr-code,
140+
.qrcode-page:-webkit-full-screen .qrcode-wrapper qr-code {
141+
width: 70vh !important;
142+
height: 70vh !important;
143+
}
144+
145+
.qrcode-page:fullscreen.light-mode,
146+
.qrcode-page:-webkit-full-screen.light-mode {
147+
background: #ffffff;
148+
}
149+
</style>
150+
151+
<script src="https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js"></script>
152+
<script>
153+
(function() {
154+
var qr = document.getElementById('qr');
155+
var container = document.getElementById('qrcode-container');
156+
var toggleBtn = document.getElementById('toggle-bg');
157+
var isLightMode = false;
158+
159+
// Animate QR code on load
160+
qr.addEventListener('codeRendered', function() {
161+
qr.animateQRCode('FadeInCenterOut');
162+
});
163+
164+
// Toggle background
165+
toggleBtn.addEventListener('click', function() {
166+
isLightMode = !isLightMode;
167+
container.classList.toggle('light-mode', isLightMode);
168+
169+
// Update QR code colors for better contrast
170+
if (isLightMode) {
171+
qr.setAttribute('module-color', '#1d1f21');
172+
qr.setAttribute('position-ring-color', '#2a6f5a');
173+
qr.setAttribute('position-center-color', '#c4873a');
174+
toggleBtn.querySelector('.toggle-icon').textContent = '🌙';
175+
toggleBtn.querySelector('.toggle-text').textContent = 'Dark mode';
176+
} else {
177+
qr.setAttribute('module-color', '#c9cacc');
178+
qr.setAttribute('position-ring-color', '#93BEAE');
179+
qr.setAttribute('position-center-color', '#F4BF77');
180+
toggleBtn.querySelector('.toggle-icon').textContent = '☀️';
181+
toggleBtn.querySelector('.toggle-text').textContent = 'Light mode';
182+
}
183+
});
184+
})();
185+
</script>

0 commit comments

Comments
 (0)