canti primo tag

2026-05-16 17:24:59 +02:00
commit 0c33fc6fcf
106 changed files with 28210 additions and 0 deletions
@@ -0,0 +1,21 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar class="bg-gradient">
+    <ion-title class="outfit-font">Scansiona QR</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="cancel()" color="secondary" class="outfit-font">Chiudi</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-no-padding">
+  <div class="scanner-container">
+    <zxing-scanner
+      [formats]="allowedFormats"
+      (scanSuccess)="onCodeResult($event)">
+    </zxing-scanner>
+    <div class="scan-overlay">
+      <div class="scan-frame"></div>
+      <p class="scan-text">Inquadra il QR Code della tua parrocchia</p>
+    </div>
+  </div>
+</ion-content>
@@ -0,0 +1,63 @@
+.scanner-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  zxing-scanner {
+    width: 100%;
+    height: 100%;
+  }
+
+  .scan-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+
+    .scan-frame {
+      width: 250px;
+      height: 250px;
+      border: 2px solid white;
+      border-radius: 20px;
+      box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5);
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: var(--ion-color-secondary);
+        box-shadow: 0 0 10px var(--ion-color-secondary);
+        animation: scan 2s linear infinite;
+      }
+    }
+
+    .scan-text {
+      color: white;
+      margin-top: 24px;
+      font-weight: 500;
+      text-align: center;
+      padding: 0 40px;
+    }
+  }
+}
+
+@keyframes scan {
+  0% { top: 0; }
+  100% { top: 100%; }
+}
@@ -0,0 +1,28 @@
+import { Component, inject } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { ZXingScannerModule } from '@zxing/ngx-scanner';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { BarcodeFormat } from '@zxing/library';
+
+@Component({
+  selector: 'app-qr-scanner',
+  templateUrl: './qr-scanner.component.html',
+  styleUrls: ['./qr-scanner.component.scss'],
+  standalone: true,
+  imports: [CommonModule, IonicModule, ZXingScannerModule]
+})
+export class QrScannerComponent {
+  private modalCtrl = inject(ModalController);
+  public allowedFormats = [BarcodeFormat.QR_CODE];
+
+  onCodeResult(result: string) {
+    if (result) {
+      this.modalCtrl.dismiss(result);
+    }
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss();
+  }
+}