https://yannick.services/apps/qr-code/Recent content in Générateur de QR Codes on yannick.servicesHugo -- gohugo.iofrcontact@yannick.services (Yannick)contact@yannick.services (Yannick)https://yannick.services/apps/qr-code/creer/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/qr-code/creer/<script> document.addEventListener('alpine:init', () => { const COGNITO_DOMAIN = 'https:\/\/auth.yannick.services'; const COGNITO_CLIENT_ID = '76sdci6g48222d6olhqrq88529'; const COGNITO_REDIRECT_URI = 'https:\/\/yannick.services\/compte\/callback\/'; const COGNITO_TOKEN_URL = `${COGNITO_DOMAIN}/oauth2/token`; Alpine.store('auth', { accessToken: null, idToken: null, refreshToken: null, init() { this.accessToken = localStorage.getItem('ys_access_token'); this.idToken = localStorage.getItem('ys_id_token'); this.refreshToken = localStorage.getItem('ys_refresh_token'); }, isAuthenticated() { if (!this.accessToken) return false; if (this.isTokenExpired(this.accessToken)) { if (this.refreshToken) return true; return false; } return true; }, isTokenExpired(token) { try { const payload = JSON.parse(atob(token.split('.')[1])); return payload.exp * 1000 < Date.now(); } catch (e) { return true; } }, async refreshIfNeeded() { if (!this.isTokenExpired(this.accessToken)) return true; if (!this.refreshToken) return false; try { const resp = await fetch(COGNITO_TOKEN_URL, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ grant_type: 'refresh_token', client_id: COGNITO_CLIENT_ID, refresh_token: this.refreshToken, }), }); if (!resp.ok) throw new Error('refresh_failed'); const data = await resp.json(); this.setTokens(data.access_token, data.id_token, this.refreshToken); return true; } catch (e) { this.logout(); return false; } }, setTokens(access, id, refresh) { this.accessToken = access; this.idToken = id; this.refreshToken = refresh; localStorage.setItem('ys_access_token', access); localStorage.setItem('ys_id_token', id); localStorage.setItem('ys_refresh_token', refresh); }, logout() { this.accessToken = null; this.idToken = null; this.refreshToken = null; localStorage.removeItem('ys_access_token'); localStorage.removeItem('ys_id_token'); localStorage.removeItem('ys_refresh_token'); var logoutUrl = COGNITO_DOMAIN + '/logout?client_id=' + COGNITO_CLIENT_ID + '&logout_uri=' + encodeURIComponent('https://yannick.services/'); window.location.href = logoutUrl; }, async apiFetch(url, options) { if (!options) options = {}; const ok = await this.refreshIfNeeded(); if (!ok) return null; const headers = options.headers || {}; headers['Authorization'] = 'Bearer ' + this.idToken; headers['Content-Type'] = 'application/json'; return fetch(url, { method: options.method || 'GET', headers: headers, body: options.body || undefined, }); }, generateCodeVerifier() { const array = new Uint8Array(32); crypto.getRandomValues(array); return btoa(String.fromCharCode.apply(null, array)) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); }, async generateCodeChallenge(verifier) { const encoder = new TextEncoder(); const data = encoder.encode(verifier); const digest = await crypto.subtle.digest('SHA-256', data); return btoa(String.fromCharCode.apply(null, new Uint8Array(digest))) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); }, async redirectToLogin() { localStorage.setItem('ys_return_url', window.location.pathname + window.location.search); const verifier = this.generateCodeVerifier(); localStorage.setItem('ys_code_verifier', verifier); const challenge = await this.generateCodeChallenge(verifier); const params = new URLSearchParams({ response_type: 'code', client_id: COGNITO_CLIENT_ID, redirect_uri: COGNITO_REDIRECT_URI, scope: 'openid email', code_challenge: challenge, code_challenge_method: 'S256', lang: 'fr', }); window.location.href = COGNITO_DOMAIN + '/oauth2/authorize?' + params.toString(); }, }); }); </script> <style> .qrc-container { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .qrc-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; } .dark .qrc-card { background: #1f2937; border-color: #374151; } .qrc-step-title { font-size: 1rem; font-weight: 600; color: #111827; margin: 0 0 1rem 0; } .dark .qrc-step-title { color: #f3f4f6; } .qrc-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 540px) { .qrc-type-grid { grid-template-columns: repeat(3, 1fr); } } .qrc-type-card { padding: 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; background: #fafafa; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .qrc-type-card:hover { border-color: #93c5fd; background: #eff6ff; } .dark .qrc-type-card { background: #111827; border-color: #374151; } .dark .qrc-type-card:hover { border-color: #60a5fa; background: #1e3a5f; } .qrc-type-card.selected { border-color: #2563eb; background: #eff6ff; } .dark .qrc-type-card.selected { border-color: #60a5fa; background: #1e3a5f; } .qrc-type-icon { font-size: 1.5rem; color: #6b7280; margin-bottom: 0.5rem; } .qrc-type-card.selected .qrc-type-icon { color: #2563eb; } .dark .qrc-type-card.selected .qrc-type-icon { color: #60a5fa; } .qrc-type-label { font-size: 0.8125rem; font-weight: 500; color: #374151; } .dark .qrc-type-label { color: #d1d5db; } .qrc-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; } .qrc-field label { font-size: 0.8125rem; font-weight: 500; color: #374151; } .dark .qrc-field label { color: #d1d5db; } .qrc-field input, .qrc-field textarea, .qrc-field select { padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 1px solid #d1d5db; font-size: 0.875rem; background: #fff; color: #111827; } .dark .qrc-field input, .dark .qrc-field textarea, .dark .qrc-field select { background: #111827; border-color: #4b5563; color: #f3f4f6; } .qrc-field input:focus, .qrc-field textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); } .qrc-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: background 0.15s; } .qrc-btn-primary { background: #2563eb; color: #fff; } .qrc-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .qrc-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .dark .qrc-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .qrc-btn:disabled { opacity: 0.5; cursor: not-allowed; } .qrc-toggle { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .qrc-toggle-switch { position: relative; width: 2.5rem; height: 1.375rem; background: #d1d5db; border-radius: 9999px; cursor: pointer; transition: background 0.2s; } .qrc-toggle-switch.on { background: #2563eb; } .qrc-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem; background: #fff; border-radius: 50%; transition: transform 0.2s; } .qrc-toggle-switch.on::after { transform: translateX(1.125rem); } .qrc-success { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .qrc-success img { max-width: 200px; border-radius: 0.5rem; border: 1px solid #e5e7eb; } .qrc-error { color: #dc2626; font-size: 0.8125rem; margin-top: 0.25rem; } .qrc-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: qrc-spin 0.6s linear infinite; display: inline-block; } @keyframes qrc-spin { to { transform: rotate(360deg); } } [x-cloak] { display: none !important; } </style> <div x-data="qrcodeCreate()" x-cloak class="qrc-container"> <template x-if="loading"> <div style="display:flex;align-items:center;justify-content:center;min-height:20vh;"> <div class="qrc-spinner" style="width:1.5rem;height:1.5rem;"></div> </div> </template> <template x-if="!loading && !authenticated"> <div class="qrc-card" style="text-align:center;"> <p style="font-size:0.875rem;color:#6b7280;">Connectez-vous pour créer un QR code.</p>https://yannick.services/apps/qr-code/detail/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/qr-code/detail/<script> document.addEventListener('alpine:init', () => { const COGNITO_DOMAIN = 'https:\/\/auth.yannick.services'; const COGNITO_CLIENT_ID = '76sdci6g48222d6olhqrq88529'; const COGNITO_REDIRECT_URI = 'https:\/\/yannick.services\/compte\/callback\/'; const COGNITO_TOKEN_URL = `${COGNITO_DOMAIN}/oauth2/token`; Alpine.store('auth', { accessToken: null, idToken: null, refreshToken: null, init() { this.accessToken = localStorage.getItem('ys_access_token'); this.idToken = localStorage.getItem('ys_id_token'); this.refreshToken = localStorage.getItem('ys_refresh_token'); }, isAuthenticated() { if (!this.accessToken) return false; if (this.isTokenExpired(this.accessToken)) { if (this.refreshToken) return true; return false; } return true; }, isTokenExpired(token) { try { const payload = JSON.parse(atob(token.split('.')[1])); return payload.exp * 1000 < Date.now(); } catch (e) { return true; } }, async refreshIfNeeded() { if (!this.isTokenExpired(this.accessToken)) return true; if (!this.refreshToken) return false; try { const resp = await fetch(COGNITO_TOKEN_URL, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ grant_type: 'refresh_token', client_id: COGNITO_CLIENT_ID, refresh_token: this.refreshToken, }), }); if (!resp.ok) throw new Error('refresh_failed'); const data = await resp.json(); this.setTokens(data.access_token, data.id_token, this.refreshToken); return true; } catch (e) { this.logout(); return false; } }, setTokens(access, id, refresh) { this.accessToken = access; this.idToken = id; this.refreshToken = refresh; localStorage.setItem('ys_access_token', access); localStorage.setItem('ys_id_token', id); localStorage.setItem('ys_refresh_token', refresh); }, logout() { this.accessToken = null; this.idToken = null; this.refreshToken = null; localStorage.removeItem('ys_access_token'); localStorage.removeItem('ys_id_token'); localStorage.removeItem('ys_refresh_token'); var logoutUrl = COGNITO_DOMAIN + '/logout?client_id=' + COGNITO_CLIENT_ID + '&logout_uri=' + encodeURIComponent('https://yannick.services/'); window.location.href = logoutUrl; }, async apiFetch(url, options) { if (!options) options = {}; const ok = await this.refreshIfNeeded(); if (!ok) return null; const headers = options.headers || {}; headers['Authorization'] = 'Bearer ' + this.idToken; headers['Content-Type'] = 'application/json'; return fetch(url, { method: options.method || 'GET', headers: headers, body: options.body || undefined, }); }, generateCodeVerifier() { const array = new Uint8Array(32); crypto.getRandomValues(array); return btoa(String.fromCharCode.apply(null, array)) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); }, async generateCodeChallenge(verifier) { const encoder = new TextEncoder(); const data = encoder.encode(verifier); const digest = await crypto.subtle.digest('SHA-256', data); return btoa(String.fromCharCode.apply(null, new Uint8Array(digest))) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); }, async redirectToLogin() { localStorage.setItem('ys_return_url', window.location.pathname + window.location.search); const verifier = this.generateCodeVerifier(); localStorage.setItem('ys_code_verifier', verifier); const challenge = await this.generateCodeChallenge(verifier); const params = new URLSearchParams({ response_type: 'code', client_id: COGNITO_CLIENT_ID, redirect_uri: COGNITO_REDIRECT_URI, scope: 'openid email', code_challenge: challenge, code_challenge_method: 'S256', lang: 'fr', }); window.location.href = COGNITO_DOMAIN + '/oauth2/authorize?' + params.toString(); }, }); }); </script> <style> .qrd-container { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .qrd-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; } .dark .qrd-card { background: #1f2937; border-color: #374151; } .qrd-header { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.25rem; } .qrd-qr-preview { width: 120px; height: 120px; border-radius: 0.5rem; border: 1px solid #e5e7eb; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f9fafb; } .dark .qrd-qr-preview { background: #111827; border-color: #374151; } .qrd-qr-preview img { width: 100%; height: 100%; object-fit: contain; } .qrd-info { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .qrd-title { font-size: 1rem; font-weight: 600; color: #111827; word-break: break-all; } .dark .qrd-title { color: #f3f4f6; } .qrd-sub { font-size: 0.8125rem; color: #6b7280; } .dark .qrd-sub { color: #9ca3af; } .qrd-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; } .qrd-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; } .qrd-badge-dynamic { background: #dbeafe; color: #1e40af; } .dark .qrd-badge-dynamic { background: #1e3a5f; color: #93c5fd; } .qrd-badge-static { background: #f3f4f6; color: #374151; } .dark .qrd-badge-static { background: #374151; color: #d1d5db; } .qrd-badge-active { background: #dcfce7; color: #166534; } .dark .qrd-badge-active { background: #14532d; color: #86efac; } .qrd-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; } .dark .qrd-section { border-top-color: #374151; } .qrd-section-title { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 0.75rem; } .dark .qrd-section-title { color: #6b7280; } .qrd-row { display: flex; justify-content: space-between; align-items: center; padding: 0.375rem 0; font-size: 0.8125rem; } .qrd-row-label { color: #6b7280; } .dark .qrd-row-label { color: #9ca3af; } .qrd-row-value { color: #111827; font-weight: 500; } .dark .qrd-row-value { color: #f3f4f6; } .qrd-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; } .qrd-field label { font-size: 0.8125rem; font-weight: 500; color: #374151; } .dark .qrd-field label { color: #d1d5db; } .qrd-field input { padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 1px solid #d1d5db; font-size: 0.875rem; background: #fff; color: #111827; } .dark .qrd-field input { background: #111827; border-color: #4b5563; color: #f3f4f6; } .qrd-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: background 0.15s; } .qrd-btn-primary { background: #2563eb; color: #fff; } .qrd-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .qrd-btn-danger { background: #dc2626; color: #fff; } .qrd-btn-danger:hover:not(:disabled) { background: #b91c1c; } .qrd-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .dark .qrd-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .qrd-btn:disabled { opacity: 0.5; cursor: not-allowed; } .qrd-stats-big { font-size: 2rem; font-weight: 700; color: #111827; } .dark .qrd-stats-big { color: #f3f4f6; } .qrd-tag { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; background: #e0e7ff; color: #3730a3; } .dark .qrd-tag { background: #312e81; color: #a5b4fc; } .qrd-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: qrd-spin 0.6s linear infinite; display: inline-block; } @keyframes qrd-spin { to { transform: rotate(360deg); } } .qrd-error { color: #dc2626; font-size: 0.8125rem; margin-top: 0.5rem; } [x-cloak] { display: none !important; } </style> <div x-data="qrcodeDetail()" x-cloak class="qrd-container"> <template x-if="loading"> <div style="display:flex;align-items:center;justify-content:center;min-height:20vh;"> <div class="qrd-spinner" style="width:1.5rem;height:1.5rem;"></div> </div> </template> <template x-if="!loading && !record"> <div class="qrd-card" style="text-align:center;"> <p style="font-size:0.875rem;color:#6b7280;">QR code non trouvé.</p>