admin/tool-website
2
0
Fork 0
mirror of https://github.com/danielvici/tool-website.git synced 2026-01-16 23:01:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add:If no URL or text has been entered, it will be displayed visually.

Browse Source
This commit is contained in:
danielvici123
2025-11-21 15:34:20 +01:00
parent 2fa3a8b5f3
commit 181978d892
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/sites/generator/qrcode/generator-qrcode.html
View File

@@ -18,9 +18,9 @@
<div [formGroup]="qrCodeDetailsForm" class="space-y-6"> <div [formGroup]="qrCodeDetailsForm" class="space-y-6">
<div> <div>
<label class="block text-sm font-medium text-gray-300 mb-2">Text or URL</label> <label class="block text-sm font-medium text-gray-300 mb-2">Text or URL*</label>
<input type="text" placeholder="Enter text or URL" formControlName="text" <input type="text" placeholder="Enter text or URL" formControlName="text"
class="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2" /> class="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2 focus:outline-none" [ngClass]="{'border-red-500': !qrCodeDetailsForm.valid }" />
</div> </div>
<div> <div>
@@ -43,10 +43,12 @@
</div> </div>
</div> </div>
<button type="button" (click)="generateQR()" <span title="You have to enter a URL to contiune">
class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"> <button type="button" (click)="generateQR()"
Generate QR Code class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors disabled:bg-gray-500" [disabled]="!qrCodeDetailsForm.valid">
</button> Generate QR Code
</button>
</span>
</div> </div>
<div class="flex mt-6 flex-col items-center space-y-4"> <div class="flex mt-6 flex-col items-center space-y-4">

3
src/app/sites/generator/qrcode/generator-qrcode.ts
View File

@@ -3,12 +3,13 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import { CustomTitle } from "../../../components/custom-title/custom-title"; import { CustomTitle } from "../../../components/custom-title/custom-title";
import { CustomDescription } from "../../../components/custom-description/custom-description"; import { CustomDescription } from "../../../components/custom-description/custom-description";
import { NgClass } from "../../../../../node_modules/@angular/common";
@Component({ @Component({
selector: 'app-generator-qrcode', selector: 'app-generator-qrcode',
templateUrl: './generator-qrcode.html', templateUrl: './generator-qrcode.html',
styleUrls: ['./generator-qrcode.css'], styleUrls: ['./generator-qrcode.css'],
imports: [ReactiveFormsModule, CustomTitle, CustomDescription], imports: [ReactiveFormsModule, CustomTitle, CustomDescription, NgClass],
}) })
export class GeneratorQrcode { export class GeneratorQrcode {
qrDataUrl: string | null = null; qrDataUrl: string | null = null;