+
+
+
+
+ {{ i.content }}
+
+
No items yet.
+
- Ready to create an app?
-
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index dca8b77..7c0b43c 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -1,12 +1,23 @@
import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonIcon,
+ IonTitle,
+ IonToolbar,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { camera, list, time } from 'ionicons/icons';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
- imports: [IonHeader, IonToolbar, IonTitle, IonContent],
+ imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonIcon],
})
export class HomePage {
- constructor() {}
+ constructor() {
+ addIcons({ camera, time, list });
+ }
}
diff --git a/src/app/scan/scan.page.html b/src/app/scan/scan.page.html
index 8c38c95..683622f 100644
--- a/src/app/scan/scan.page.html
+++ b/src/app/scan/scan.page.html
@@ -1,46 +1,44 @@
Start with Ionic UI Components
+
+
+
+
+
+
-
-
+
+
+
-
+
+
+
+
+
-
-
- Last result
-
-
-
-
+
+
diff --git a/src/app/scan/scan.page.scss b/src/app/scan/scan.page.scss
index e69de29..99a7ccd 100644
--- a/src/app/scan/scan.page.scss
+++ b/src/app/scan/scan.page.scss
@@ -0,0 +1,83 @@
+:host {
+ --overlay-padding: 32px;
+}
+
+.scanner-content {
+ position: relative;
+ --background: transparent; /* permite ver a câmera por trás quando ativarmos */
+ padding-bottom: 140px; /* espaço para action bar + fab */
+}
+
+.scan-overlay {
+ display: grid;
+ place-items: center;
+ height: calc(100% - 160px);
+ padding: var(--overlay-padding);
+ position: relative;
+}
+
+.scan-window {
+ width: 75vw;
+ height: 55vw;
+ max-width: 480px;
+ max-height: 360px;
+ border-radius: 24px;
+ border: 3px dashed var(--scan-outline);
+}
+
+.scan-watermark {
+ position: absolute;
+ width: 220px;
+ height: 220px;
+ object-fit: contain;
+ opacity: .12; /* sutil, como no mock */
+ filter: drop-shadow(0 20px 60px rgba(0,0,0,.35));
+}
+
+.scan-fab {
+ --box-shadow: 0 12px 40px rgba(0,0,0,.35);
+ ion-fab-button {
+ width: 68px;
+ height: 68px;
+ --border-radius: 50%;
+ ion-icon { font-size: 28px; }
+ }
+}
+
+.action-bar {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
+ background: var(--surface);
+ box-shadow: var(--elevation-1);
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.action-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 6px;
+ color: var(--ion-text-color);
+}
+
+.icon-circle {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ background: var(--surface-2);
+ display: grid;
+ place-items: center;
+ ion-icon { font-size: 24px; opacity: .9; }
+}
+
+.label {
+ font-size: 12px;
+ opacity: .8;
+}
diff --git a/src/app/scan/scan.page.ts b/src/app/scan/scan.page.ts
index 168cb68..a1de747 100644
--- a/src/app/scan/scan.page.ts
+++ b/src/app/scan/scan.page.ts
@@ -1,22 +1,21 @@
import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
IonContent,
IonHeader,
IonTitle,
IonToolbar,
- IonButton,
IonIcon,
- IonCard,
- IonCardHeader,
- IonCardTitle,
- IonCardContent,
+ IonButtons,
+ IonFab,
+ IonFabButton,
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
-import { camera, close, checkmark, copy, time, trash } from 'ionicons/icons';
+import { settings, scan, images, flash, create, time, close } from 'ionicons/icons';
import { Qr } from '../services/qr';
-import { Storage, ScanEntry } from '../services/storage';
+import { Storage } from '../services/storage';
+import { Router } from '@angular/router';
@Component({
selector: 'app-scan',
@@ -28,23 +27,29 @@ import { Storage, ScanEntry } from '../services/storage';
IonHeader,
IonTitle,
IonToolbar,
- IonButton,
IonIcon,
- IonCard,
- IonCardHeader,
- IonCardTitle,
- IonCardContent,
+ IonButtons,
+ IonFab,
+ IonFabButton,
CommonModule,
FormsModule,
],
})
export class ScanPage {
+ private qr = inject(Qr);
+ private store = inject(Storage);
+ private router = inject(Router);
+
isScanning = false;
lastResult: string | null = null;
- saving = false;
- constructor(private qr: Qr, private store: Storage) {
- addIcons({ camera, close, checkmark, copy, time, trash });
+ constructor() {
+ addIcons({ settings, scan, images, flash, create, time, close });
+ }
+
+ async onFabClick() {
+ if (this.isScanning) return this.cancel();
+ await this.start();
}
async start() {
@@ -54,7 +59,7 @@ export class ScanPage {
const content = await this.qr.startScan();
if (content) {
this.lastResult = content;
- await this.save(content);
+ await this.store.addEntry(content);
}
} finally {
this.isScanning = false;
@@ -66,16 +71,26 @@ export class ScanPage {
this.isScanning = false;
}
- async save(content: string) {
- this.saving = true;
- try {
- await this.store.addEntry(content);
- } finally {
- this.saving = false;
- }
+ goHistory() {
+ this.router.navigateByUrl('/history');
+ }
+
+ goSettings() {
+ this.router.navigateByUrl('/settings');
+ }
+
+ openGallery() {
+ // Placeholder da POC: futura leitura por imagem/galeria
+ console.log('openGallery: not implemented in POC');
+ }
+
+ toggleFlash() {
+ // Placeholder da POC: avaliar suporte do plugin/alternativas
+ console.log('toggleFlash: not implemented in POC');
}
- copyToClipboard(text: string) {
- if (navigator?.clipboard) navigator.clipboard.writeText(text).catch(() => {});
+ createCode() {
+ // Placeholder da POC: futura tela de criação de QR
+ console.log('createCode: not implemented in POC');
}
}
diff --git a/src/app/services/qr.ts b/src/app/services/qr.ts
index 4b21aa5..a4f75f6 100644
--- a/src/app/services/qr.ts
+++ b/src/app/services/qr.ts
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
-import { BarcodeScanner } from '@capacitor/barcode-scanner';
+import { CapacitorBarcodeScanner, CapacitorBarcodeScannerTypeHint } from '@capacitor/barcode-scanner';
@Injectable({
providedIn: 'root'
@@ -7,47 +7,25 @@ import { BarcodeScanner } from '@capacitor/barcode-scanner';
export class Qr {
private active = false;
- async ensurePermission(): Promise {
- const status = await BarcodeScanner.checkPermission({ force: true });
- return status.granted === true;
- }
-
- private setBackground(active: boolean) {
- const body = document.querySelector('body');
- if (!body) return;
- if (active) {
- body.classList.add('scanner-active');
- } else {
- body.classList.remove('scanner-active');
- }
- }
-
async startScan(): Promise {
- const granted = await this.ensurePermission();
- if (!granted) return null;
-
this.active = true;
- this.setBackground(true);
- await BarcodeScanner.hideBackground();
-
try {
- const result = await BarcodeScanner.startScan();
- const content = (result as any)?.content;
+ const result = await CapacitorBarcodeScanner.scanBarcode({
+ hint: (17 as CapacitorBarcodeScannerTypeHint), // ALL
+ scanInstructions: '',
+ scanButton: false,
+ });
+ const content = (result as any)?.ScanResult ?? null;
return content ?? null;
+ } catch (e) {
+ return null;
} finally {
- await this.stopScan();
+ this.active = false;
}
}
async stopScan(): Promise {
- if (!this.active) return;
+ // Plugin atual não expõe stop; manter no-op para compatibilidade
this.active = false;
- try {
- await BarcodeScanner.showBackground();
- } catch {}
- try {
- await BarcodeScanner.stopScan();
- } catch {}
- this.setBackground(false);
}
}
diff --git a/src/app/services/storage.service.ts b/src/app/services/storage.service.ts
new file mode 100644
index 0000000..5622ec4
--- /dev/null
+++ b/src/app/services/storage.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Preferences } from '@capacitor/preferences';
+
+const KEY = 'history';
+
+@Injectable({ providedIn: 'root' })
+export class StorageService {
+ async all(): Promise {
+ const { value } = await Preferences.get({ key: KEY });
+ return value ? JSON.parse(value) : [];
+ }
+
+ async save(item: string) {
+ const list = await this.all();
+ list.unshift(item);
+ await Preferences.set({
+ key: KEY,
+ value: JSON.stringify(list.slice(0, 50)),
+ });
+ }
+
+ async clear() {
+ await Preferences.remove({ key: KEY });
+ }
+}
diff --git a/src/app/settings/settings.page.html b/src/app/settings/settings.page.html
index 003abd6..7e9c9f1 100644
--- a/src/app/settings/settings.page.html
+++ b/src/app/settings/settings.page.html
@@ -1,13 +1,45 @@
-
+
- settings
+ Settings
-
-
-
- settings
-
-
+
+
+ Preferences
+
+ App Theme
+ System
+
+
+ Language
+ English
+
+
+
+ Notifications
+
+ App Updates
+
+
+ Scan Notifications
+
+
+
+ Privacy
+
+ Data Management
+
+
+ Privacy Policy
+
+
+
+ About
+
+ App Version
+ 1.2.3
+
diff --git a/src/app/settings/settings.page.ts b/src/app/settings/settings.page.ts
index 83d889f..a0229f3 100644
--- a/src/app/settings/settings.page.ts
+++ b/src/app/settings/settings.page.ts
@@ -6,6 +6,11 @@ import {
IonHeader,
IonTitle,
IonToolbar,
+ IonNote,
+ IonToggle,
+ IonItem,
+ IonListHeader,
+ IonLabel,
} from '@ionic/angular/standalone';
@Component({
@@ -18,6 +23,11 @@ import {
IonHeader,
IonTitle,
IonToolbar,
+ IonNote,
+ IonToggle,
+ IonLabel,
+ IonItem,
+ IonListHeader,
CommonModule,
FormsModule,
],
diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html
index 3f4e0c7..0f51e5f 100644
--- a/src/app/tabs/tabs.page.html
+++ b/src/app/tabs/tabs.page.html
@@ -1,13 +1,18 @@
-
-
- tabs
-
-
+
+
+
+ Scan
+
-
-
-
- tabs
-
-
-
+
+ History
+
+
+
+ Settings
+
+
+
diff --git a/src/app/tabs/tabs.page.ts b/src/app/tabs/tabs.page.ts
index 7558e6d..5e9f42e 100644
--- a/src/app/tabs/tabs.page.ts
+++ b/src/app/tabs/tabs.page.ts
@@ -2,26 +2,38 @@ import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
- IonContent,
- IonHeader,
- IonTitle,
- IonToolbar,
+ IonIcon,
+ IonLabel,
+ IonTabBar,
+ IonTabButton,
+ IonTabs,
} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+
+import { settingsOutline, refreshOutline, qrCodeOutline } from 'ionicons/icons';
+
@Component({
selector: 'app-tabs',
templateUrl: './tabs.page.html',
styleUrls: ['./tabs.page.scss'],
standalone: true,
imports: [
- IonContent,
- IonHeader,
- IonTitle,
- IonToolbar,
+ IonTabs,
+ IonTabBar,
+ IonTabButton,
+ IonIcon,
+ IonLabel,
CommonModule,
FormsModule,
],
})
export class TabsPage {
- constructor() {}
+ constructor() {
+ addIcons({
+ settingsOutline,
+ refreshOutline,
+ qrCodeOutline,
+ });
+ }
}
diff --git a/src/global.scss b/src/global.scss
index 999ff53..121d308 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -35,3 +35,9 @@
/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import '@ionic/angular/css/palettes/dark.system.css';
+
+/* Transparent background when scanner active to reveal camera preview */
+body.scanner-active {
+ background: transparent !important;
+}
+
diff --git a/src/index.html b/src/index.html
index 29902c2..52f303f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,8 @@
-
+
+
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 6146c39..169d8d5 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -1,2 +1,174 @@
// For information on how to create your own theme, please see:
// http://ionicframework.com/docs/theming/
+/* ==========================================================================
+ Pink-Code · Ionic 8 Design Tokens
+ Place this complete file at: src/theme/variables.scss
+ ========================================================================== */
+
+/* 1 ▪ Base palette (Light mode) */
+:root {
+ /* --- Brand ------------------------------------------------------------- */
+ --ion-color-primary: #ff5eae;
+ --ion-color-primary-rgb: 255, 94, 174;
+ --ion-color-primary-contrast: #ffffff;
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
+ --ion-color-primary-shade: #e0559c;
+ --ion-color-primary-tint: #ff7ab9;
+
+ /* Optional secondary / tertiary accents */
+ --ion-color-secondary: #ffb347; /* laranja suave */
+ --ion-color-tertiary: #5ec6ff; /* azul para estados neutros */
+ /* Secondary full token set */
+ --ion-color-secondary-rgb: 255, 179, 71;
+ --ion-color-secondary-contrast: #ffffff;
+ --ion-color-secondary-contrast-rgb: 255, 255, 255;
+ --ion-color-secondary-shade: #e09e3f;
+ --ion-color-secondary-tint: #ffc46a;
+ /* Tertiary full token set */
+ --ion-color-tertiary-rgb: 94, 198, 255;
+ --ion-color-tertiary-contrast: #ffffff;
+ --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+ --ion-color-tertiary-shade: #52addf;
+ --ion-color-tertiary-tint: #7bd1ff;
+
+ /* Neutral greys */
+ --ion-color-step-50: #f9f9fa;
+ --ion-color-step-100: #f4f5f8;
+ --ion-color-step-150: #e9eaee;
+ --ion-color-step-200: #dcdde3;
+ --ion-color-step-250: #c3c5ce;
+ --ion-color-step-300: #a9acb8;
+ --ion-color-step-350: #9194a1;
+ --ion-color-step-400: #7a7d8b;
+ --ion-color-step-450: #636673;
+ --ion-color-step-500: #4c4f5b;
+ --ion-color-step-550: #373a44;
+ --ion-color-step-600: #272a33;
+
+ /* Text & surface */
+ --ion-text-color: var(--ion-color-step-500);
+ --ion-background-color: var(--ion-color-step-50);
+ --ion-card-background: #ffffff;
+ --ion-item-background: #ffffff;
+
+ /* Status colors (optional) */
+ --ion-color-success: #4cd964;
+ --ion-color-success-rgb: 76, 217, 100;
+ --ion-color-success-contrast: #ffffff;
+ --ion-color-success-contrast-rgb: 255, 255, 255;
+ --ion-color-success-shade: #42bf58;
+ --ion-color-success-tint: #69e07d;
+
+ --ion-color-warning: #ffcc00;
+ --ion-color-warning-rgb: 255, 204, 0;
+ --ion-color-warning-contrast: #1f222a;
+ --ion-color-warning-contrast-rgb: 31, 34, 42;
+ --ion-color-warning-shade: #e0b400;
+ --ion-color-warning-tint: #ffd52b;
+
+ --ion-color-danger: #ff3b30;
+ --ion-color-danger-rgb: 255, 59, 48;
+ --ion-color-danger-contrast: #ffffff;
+ --ion-color-danger-contrast-rgb: 255, 255, 255;
+ --ion-color-danger-shade: #e0352b;
+ --ion-color-danger-tint: #ff5c52;
+
+ /* Surfaces & elevation */
+ --surface: #ffffff;
+ --surface-2: var(--ion-color-step-100);
+ --elevation-1: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+ /* Scanner outline */
+ --scan-outline: var(--ion-color-primary);
+}
+
+/* 2 ▪ Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --ion-color-primary: #ff7ab9; /* tom mais claro p/ contraste */
+ --ion-color-primary-rgb: 255, 122, 185;
+ --ion-color-primary-contrast: #ffffff;
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
+ --ion-color-primary-shade: #e467a3;
+ --ion-color-primary-tint: #ff93c5;
+
+ /* Neutrals flipped */
+ --ion-color-step-50: #1f222a;
+ --ion-color-step-100: #242731;
+ --ion-color-step-150: #2a2e38;
+ --ion-color-step-200: #30333e;
+ --ion-color-step-250: #363a45;
+ --ion-color-step-300: #3d404c;
+ --ion-color-step-350: #454854;
+ --ion-color-step-400: #4d505d;
+ --ion-color-step-450: #5a5d6a;
+ --ion-color-step-500: #dadde5; /* texto principal #E4E7EC like */
+ --ion-color-step-550: #e4e7ec;
+ --ion-color-step-600: #f0f1f5;
+
+ --ion-text-color: var(--ion-color-step-550);
+ --ion-background-color: var(--ion-color-step-50);
+ --ion-card-background: #2a2e38;
+ --ion-item-background: #2a2e38;
+
+ /* Secondary/Tertiary full sets in dark */
+ --ion-color-secondary-rgb: 255, 179, 71;
+ --ion-color-secondary-contrast: #ffffff;
+ --ion-color-secondary-contrast-rgb: 255, 255, 255;
+ --ion-color-secondary-shade: #e09e3f;
+ --ion-color-secondary-tint: #ffc46a;
+
+ --ion-color-tertiary-rgb: 94, 198, 255;
+ --ion-color-tertiary-contrast: #ffffff;
+ --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+ --ion-color-tertiary-shade: #52addf;
+ --ion-color-tertiary-tint: #7bd1ff;
+
+ --ion-color-success-rgb: 76, 217, 100;
+ --ion-color-success-contrast: #1f222a;
+ --ion-color-success-contrast-rgb: 31, 34, 42;
+ --ion-color-success-shade: #42bf58;
+ --ion-color-success-tint: #69e07d;
+
+ --ion-color-warning-rgb: 255, 204, 0;
+ --ion-color-warning-contrast: #1f222a;
+ --ion-color-warning-contrast-rgb: 31, 34, 42;
+ --ion-color-warning-shade: #e0b400;
+ --ion-color-warning-tint: #ffd52b;
+
+ --ion-color-danger-rgb: 255, 59, 48;
+ --ion-color-danger-contrast: #ffffff;
+ --ion-color-danger-contrast-rgb: 255, 255, 255;
+ --ion-color-danger-shade: #e0352b;
+ --ion-color-danger-tint: #ff5c52;
+
+ /* Surfaces & elevation */
+ --surface: #2a2e38;
+ --surface-2: #242731;
+ --elevation-1: 0 12px 36px rgba(0, 0, 0, 0.45);
+
+ /* Scanner outline */
+ --scan-outline: var(--ion-color-primary);
+ }
+}
+
+/* 3 ▪ Typography helpers */
+ion-title {
+ font-weight: 600;
+}
+
+ion-card-title, ion-label {
+ line-height: 1.3;
+}
+
+/* 4 ▪ Button tweaks (optional) */
+ion-button {
+ --border-radius: 24px;
+ font-weight: 600;
+}
+
+/* Tabs active color aligned to brand */
+ion-tab-bar {
+ --color-selected: var(--ion-color-primary);
+}
+
\ No newline at end of file
+
+ 
+
+
-
+
+ {{ lastResult }}
-
-
-
-
-
-
-
-
-