feat(codev): skip fiche + annuaire table sticky + page QR code

2026-05-07 00:04:42 +02:00
parent 606b9f0a47
commit 142e5cf787
3 changed files with 226 additions and 17 deletions
--- a/pages/codev/qr.vue
+++ b/pages/codev/qr.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="qr-page">
+    <div class="qr-card">
+      <h1>Co-développement</h1>
+      <p class="qr-subtitle">Scanne pour rejoindre la session</p>
+
+      <img
+        :src="`https://api.qrserver.com/v1/create-qr-code/?size=280x280&data=${encodeURIComponent(APP_URL)}&bgcolor=ffffff&color=1B4436&margin=2`"
+        alt="QR code aep.trans-former.fr/codev"
+        class="qr-img"
+        width="280"
+        height="280"
+      />
+
+      <p class="qr-url">{{ APP_URL }}</p>
+      <p class="qr-password">Mot de passe : <strong>merci</strong></p>
+
+      <a :href="`https://api.qrserver.com/v1/create-qr-code/?size=600x600&data=${encodeURIComponent(APP_URL)}&bgcolor=ffffff&color=1B4436&margin=2`"
+        download="codev-qr.png"
+        class="qr-download"
+        target="_blank"
+      >
+        Télécharger le QR code
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const APP_URL = 'https://aep.trans-former.fr/codev'
+useHead({ title: 'QR Code — Co-développement' })
+</script>
+
+<style scoped>
+.qr-page {
+  min-height: 100vh;
+  background: var(--nav-bg, #fafafa);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+}
+.qr-card {
+  background: white;
+  border-radius: 16px;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  max-width: 360px;
+  width: 100%;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+  text-align: center;
+}
+.qr-card h1 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1a1a2e;
+  margin: 0;
+}
+.qr-subtitle {
+  font-size: 0.9rem;
+  color: #6b7280;
+  margin: 0;
+}
+.qr-img {
+  border-radius: 8px;
+  border: 2px solid #e5e7eb;
+}
+.qr-url {
+  font-size: 0.8rem;
+  color: #9ca3af;
+  margin: 0;
+  font-family: monospace;
+}
+.qr-password {
+  font-size: 0.95rem;
+  color: #374151;
+  margin: 0;
+}
+.qr-download {
+  display: inline-block;
+  padding: 10px 20px;
+  background: #1B4436;
+  color: white;
+  border-radius: 8px;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: opacity 0.15s;
+}
+.qr-download:hover { opacity: 0.88; }
+</style>