https://yannick.services/apps/url-courte/signatures/Recent content in Mes signatures on yannick.servicesHugo -- gohugo.iofrcontact@yannick.services (Yannick)contact@yannick.services (Yannick)https://yannick.services/apps/url-courte/signatures/creer/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/url-courte/signatures/creer/<script> document.addEventListener('alpine:init', () => { if (Alpine.store('auth')) return; 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'; const method = options.method || 'GET'; const response = await fetch(url, { method, headers: headers, body: options.body || undefined, }); if (response && response.status >= 500 && typeof Sentry !== 'undefined') { let errorDetail = ''; try { const b = await response.clone().json(); errorDetail = b.error || JSON.stringify(b); } catch {} Sentry.captureMessage(`API ${response.status}: ${method} ${url} — ${errorDetail}`, { level: 'error', tags: { api_status: response.status, api_method: method }, extra: { url, method, status: response.status, errorDetail }, }); } return response; }, 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> .sigapp-container { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .sigapp-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; } .dark .sigapp-card { background: #1f2937; border-color: #374151; } .sigapp-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; text-decoration: none; transition: background 0.15s, opacity 0.15s; min-height: 2.75rem; } .sigapp-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .sigapp-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sigapp-btn-primary { background: #2563eb; color: #fff; } .sigapp-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .sigapp-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .sigapp-btn-secondary:hover:not(:disabled) { background: #e5e7eb; } .dark .sigapp-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .dark .sigapp-btn-secondary:hover:not(:disabled) { background: #4b5563; } .sigapp-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: sigapp-spin 0.6s linear infinite; } @keyframes sigapp-spin { to { transform: rotate(360deg); } } .sigapp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; gap: 1rem; } .sigapp-label { display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; } .dark .sigapp-label { color: #d1d5db; } .sigapp-input { display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; color: #111827; background: #fff; transition: border-color 0.15s; } .sigapp-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .dark .sigapp-input { background: #111827; border-color: #4b5563; color: #f9fafb; } .dark .sigapp-input:focus { border-color: #2563eb; } .sigapp-input-error { border-color: #dc2626; } .dark .sigapp-input-error { border-color: #fca5a5; } .sigapp-field-error { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; } .dark .sigapp-field-error { color: #fca5a5; } </style> <style> .sigapp-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 540px) { .sigapp-form-grid { grid-template-columns: 1fr 1fr; } } .sigapp-form-section { margin-bottom: 1.5rem; } .sigapp-form-section:last-child { margin-bottom: 0; } .sigapp-form-section-title { font-size: 0.9375rem; font-weight: 600; color: #111827; margin: 0 0 1rem; } .dark .sigapp-form-section-title { color: #f9fafb; } .sigapp-templates { display: flex; gap: 0.75rem; flex-wrap: wrap; } .sigapp-template-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s; min-width: 7rem; flex: 1; } .sigapp-template-card:hover { border-color: #93c5fd; background: #f0f9ff; } .sigapp-template-card:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .dark .sigapp-template-card { background: #111827; border-color: #4b5563; } .dark .sigapp-template-card:hover { border-color: #60a5fa; background: #1e3a5f; } .sigapp-template-active { border-color: #2563eb; background: #eff6ff; } .sigapp-template-active:hover { border-color: #2563eb; } .dark .sigapp-template-active { border-color: #2563eb; background: #1e3a5f; } .sigapp-template-thumb { width: 3rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 1.25rem; } .dark .sigapp-template-thumb { color: #9ca3af; } .sigapp-section-locked { position: relative; padding: 1.5rem; border-radius: 0.5rem; background: #f9fafb; border: 1px dashed #d1d5db; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; opacity: 0.7; } .dark .sigapp-section-locked { background: #111827; border-color: #4b5563; } .sigapp-badge-plan { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: #dbeafe; color: #1e40af; text-transform: capitalize; } .dark .sigapp-badge-plan { background: #1e3a5f; color: #93c5fd; } .sigapp-preview { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; overflow-x: auto; } .dark .sigapp-preview { background: #1f2937; border-color: #374151; } .sigapp-result { border: 1px solid #dcfce7; border-radius: 0.75rem; background: #f0fdf4; padding: 1.5rem; } .dark .sigapp-result { background: #14532d; border-color: #166534; } .sigapp-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .sigapp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .sigapp-toggle-track { width: 2.5rem; height: 1.5rem; border-radius: 9999px; background: #d1d5db; transition: background 0.2s; } .sigapp-toggle input:checked + .sigapp-toggle-track { background: #2563eb; } .sigapp-toggle-thumb { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .sigapp-toggle input:checked ~ .sigapp-toggle-thumb { transform: translateX(1rem); } .sigapp-toggle input:focus-visible + .sigapp-toggle-track { outline: 2px solid #2563eb; outline-offset: 2px; } .dark .sigapp-toggle-track { background: #4b5563; } .sigapp-logo-preview { max-height: 60px; margin-top: 0.5rem; border-radius: 0.25rem; border: 1px solid #e5e7eb; } .dark .sigapp-logo-preview { border-color: #374151; } [x-cloak] { display: none !important; } </style> <div x-data="clicplusSignaturesCreate()" x-init="init()" x-cloak> <template x-if="loading"> <div class="sigapp-loading"> <div class="sigapp-spinner"></div> <p class="text-sm text-neutral-500">Chargement...</p>https://yannick.services/apps/url-courte/signatures/detail/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/url-courte/signatures/detail/<script> document.addEventListener('alpine:init', () => { if (Alpine.store('auth')) return; 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'; const method = options.method || 'GET'; const response = await fetch(url, { method, headers: headers, body: options.body || undefined, }); if (response && response.status >= 500 && typeof Sentry !== 'undefined') { let errorDetail = ''; try { const b = await response.clone().json(); errorDetail = b.error || JSON.stringify(b); } catch {} Sentry.captureMessage(`API ${response.status}: ${method} ${url} — ${errorDetail}`, { level: 'error', tags: { api_status: response.status, api_method: method }, extra: { url, method, status: response.status, errorDetail }, }); } return response; }, 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> .sigapp-detail-preview { overflow-x: auto; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fafafa; } .dark .sigapp-detail-preview { background: #111827; border-color: #374151; } .sigapp-detail-meta { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fafafa; } .dark .sigapp-detail-meta { background: #111827; border-color: #374151; } .sigapp-detail-meta-row { display: flex; align-items: baseline; gap: 0.5rem; } .sigapp-detail-meta-label { font-size: 0.75rem; font-weight: 600; color: #6b7280; min-width: 6rem; flex-shrink: 0; } .dark .sigapp-detail-meta-label { color: #9ca3af; } .sigapp-detail-meta-value { font-size: 0.875rem; color: #111827; word-break: break-word; } .dark .sigapp-detail-meta-value { color: #f9fafb; } .sigapp-detail-share { padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #f0f9ff; display: flex; flex-direction: column; gap: 0.75rem; } .dark .sigapp-detail-share { background: #0c4a6e; border-color: #164e63; } .sigapp-detail-share-url { font-size: 0.75rem; color: #374151; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.375rem; padding: 0.5rem 0.75rem; word-break: break-all; font-family: monospace; } .dark .sigapp-detail-share-url { background: #1f2937; border-color: #374151; color: #d1d5db; } .sigapp-detail-share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .sigapp-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } [x-cloak] { display: none !important; } </style> <div x-data="clicplusSignaturesDetail()" x-init="init()" x-cloak> <template x-if="loading"> <div class="sigapp-loading"> <div class="sigapp-spinner"></div> <p class="text-sm text-neutral-500">Chargement...</p>https://yannick.services/apps/url-courte/signatures/bulk/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/url-courte/signatures/bulk/<script> document.addEventListener('alpine:init', () => { if (Alpine.store('auth')) return; 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'; const method = options.method || 'GET'; const response = await fetch(url, { method, headers: headers, body: options.body || undefined, }); if (response && response.status >= 500 && typeof Sentry !== 'undefined') { let errorDetail = ''; try { const b = await response.clone().json(); errorDetail = b.error || JSON.stringify(b); } catch {} Sentry.captureMessage(`API ${response.status}: ${method} ${url} — ${errorDetail}`, { level: 'error', tags: { api_status: response.status, api_method: method }, extra: { url, method, status: response.status, errorDetail }, }); } return response; }, 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> .sigapp-container { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .sigapp-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; } .dark .sigapp-card { background: #1f2937; border-color: #374151; } .sigapp-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; text-decoration: none; transition: background 0.15s, opacity 0.15s; min-height: 2.75rem; } .sigapp-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .sigapp-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sigapp-btn-primary { background: #2563eb; color: #fff; } .sigapp-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .sigapp-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .sigapp-btn-secondary:hover:not(:disabled) { background: #e5e7eb; } .dark .sigapp-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .dark .sigapp-btn-secondary:hover:not(:disabled) { background: #4b5563; } .sigapp-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: sigapp-spin 0.6s linear infinite; } @keyframes sigapp-spin { to { transform: rotate(360deg); } } .sigapp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; gap: 1rem; } .sigapp-label { display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; } .dark .sigapp-label { color: #d1d5db; } .sigapp-input { display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; color: #111827; background: #fff; transition: border-color 0.15s; } .sigapp-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .dark .sigapp-input { background: #111827; border-color: #4b5563; color: #f9fafb; } .dark .sigapp-input:focus { border-color: #2563eb; } .sigapp-field-error { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; } .dark .sigapp-field-error { color: #fca5a5; } </style> <style> .sigapp-badge-plan { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: #dbeafe; color: #1e40af; text-transform: capitalize; } .dark .sigapp-badge-plan { background: #1e3a5f; color: #93c5fd; } .sigapp-bulk-upload { border: 2px dashed #d1d5db; border-radius: 0.75rem; padding: 1.5rem; text-align: center; transition: border-color 0.15s, background 0.15s; } .sigapp-bulk-upload:hover { border-color: #2563eb; background: #f0f9ff; } .dark .sigapp-bulk-upload { border-color: #4b5563; } .dark .sigapp-bulk-upload:hover { border-color: #2563eb; background: #0c4a6e; } .sigapp-bulk-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; margin-top: 1rem; overflow-x: auto; display: block; } .sigapp-bulk-table th { padding: 0.5rem 0.625rem; text-align: left; font-weight: 600; color: #374151; background: #f9fafb; border-bottom: 1px solid #e5e7eb; white-space: nowrap; } .dark .sigapp-bulk-table th { color: #d1d5db; background: #111827; border-bottom-color: #374151; } .sigapp-bulk-table td { padding: 0.5rem 0.625rem; color: #6b7280; border-bottom: 1px solid #f3f4f6; white-space: nowrap; } .dark .sigapp-bulk-table td { color: #9ca3af; border-bottom-color: #1f2937; } .sigapp-bulk-settings { display: flex; flex-direction: column; gap: 1.25rem; } .sigapp-bulk-settings-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 540px) { .sigapp-bulk-settings-grid { grid-template-columns: 1fr 1fr; } } .sigapp-bulk-result { border: 1px solid #dcfce7; border-radius: 0.75rem; background: #f0fdf4; padding: 1.5rem; } .dark .sigapp-bulk-result { background: #14532d; border-color: #166534; } .sigapp-bulk-result-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .sigapp-bulk-result-stat { text-align: center; } .sigapp-bulk-result-stat-value { font-size: 1.5rem; font-weight: 700; color: #111827; } .dark .sigapp-bulk-result-stat-value { color: #f9fafb; } .sigapp-bulk-result-stat-label { font-size: 0.75rem; color: #6b7280; } .dark .sigapp-bulk-result-stat-label { color: #9ca3af; } .sigapp-bulk-errors { margin-top: 1rem; padding: 1rem; border: 1px solid #fecaca; border-radius: 0.5rem; background: #fef2f2; } .dark .sigapp-bulk-errors { background: #450a0a; border-color: #7f1d1d; } .sigapp-bulk-errors-title { font-size: 0.8125rem; font-weight: 600; color: #991b1b; margin-bottom: 0.5rem; } .dark .sigapp-bulk-errors-title { color: #fca5a5; } .sigapp-bulk-errors-item { font-size: 0.75rem; color: #991b1b; padding: 0.25rem 0; } .dark .sigapp-bulk-errors-item { color: #fca5a5; } .sigapp-bulk-links { margin-top: 1rem; } .sigapp-bulk-links-title { font-size: 0.8125rem; font-weight: 600; color: #111827; margin-bottom: 0.5rem; } .dark .sigapp-bulk-links-title { color: #f9fafb; } .sigapp-bulk-link-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0; border-bottom: 1px solid #f3f4f6; } .dark .sigapp-bulk-link-item { border-bottom-color: #374151; } .sigapp-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .sigapp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .sigapp-toggle-track { width: 2.5rem; height: 1.5rem; border-radius: 9999px; background: #d1d5db; transition: background 0.2s; } .sigapp-toggle input:checked + .sigapp-toggle-track { background: #2563eb; } .sigapp-toggle-thumb { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .sigapp-toggle input:checked ~ .sigapp-toggle-thumb { transform: translateX(1rem); } .sigapp-toggle input:focus-visible + .sigapp-toggle-track { outline: 2px solid #2563eb; outline-offset: 2px; } .dark .sigapp-toggle-track { background: #4b5563; } .sigapp-disabled-state { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1rem; text-align: center; } .sigapp-logo-preview { max-height: 60px; margin-top: 0.5rem; border-radius: 0.25rem; border: 1px solid #e5e7eb; } .dark .sigapp-logo-preview { border-color: #374151; } [x-cloak] { display: none !important; } </style> <div x-data="clicplusSignaturesBulk()" x-init="init()" x-cloak> <template x-if="loading"> <div class="sigapp-loading"> <div class="sigapp-spinner"></div> <p class="text-sm text-neutral-500">Chargement...</p>https://yannick.services/apps/url-courte/signatures/view/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/url-courte/signatures/view/<style> .sigapp-view-container { max-width: 640px; margin: 0 auto; padding: 0 1rem; } .sigapp-view-preview { overflow-x: auto; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; margin-top: 1.25rem; } .dark .sigapp-view-preview { background: #1f2937; border-color: #374151; } .sigapp-view-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: background 0.15s; width: 100%; margin-top: 1rem; } .sigapp-view-btn-primary { background: #2563eb; color: #fff; } .sigapp-view-btn-primary:hover { background: #1d4ed8; } .sigapp-view-btn-primary:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .dark .sigapp-view-btn-primary { background: #2563eb; color: #fff; } .dark .sigapp-view-btn-primary:hover { background: #1d4ed8; } .sigapp-view-instructions { margin-top: 1.5rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; } .dark .sigapp-view-instructions { border-color: #374151; } .sigapp-view-accordion-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.875rem 1rem; border: none; background: #f9fafb; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: #111827; text-align: left; border-bottom: 1px solid #e5e7eb; transition: background 0.15s; } .sigapp-view-accordion-btn:last-of-type { border-bottom: none; } .sigapp-view-accordion-btn:hover { background: #f3f4f6; } .sigapp-view-accordion-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; } .dark .sigapp-view-accordion-btn { background: #111827; color: #f9fafb; border-bottom-color: #374151; } .dark .sigapp-view-accordion-btn:hover { background: #1f2937; } .sigapp-view-accordion-icon { font-size: 0.75rem; color: #6b7280; transition: transform 0.2s; } .sigapp-view-accordion-content { padding: 1rem; border-bottom: 1px solid #e5e7eb; background: #fff; } .sigapp-view-accordion-content:last-child { border-bottom: none; } .dark .sigapp-view-accordion-content { background: #1f2937; border-bottom-color: #374151; } .sigapp-view-step { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; } .sigapp-view-step:last-child { margin-bottom: 0; } .sigapp-view-step-num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #eff6ff; color: #2563eb; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .dark .sigapp-view-step-num { background: #1e3a5f; color: #93c5fd; } .sigapp-view-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: sigapp-view-spin 0.6s linear infinite; } @keyframes sigapp-view-spin { to { transform: rotate(360deg); } } .sigapp-view-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; gap: 1rem; } .sigapp-view-notfound { text-align: center; padding: 3rem 1rem; } .sigapp-view-notfound-icon { font-size: 2rem; color: #9ca3af; } .dark .sigapp-view-notfound-icon { color: #6b7280; } [x-cloak] { display: none !important; } </style> <div x-data="clicplusSignaturesView()" x-init="init()" x-cloak> <template x-if="loading"> <div class="sigapp-view-loading"> <div class="sigapp-view-spinner"></div> <p class="text-sm text-neutral-500">Chargement...</p>