mirror of
https://github.com/danielvici/tool-website.git
synced 2026-01-16 23:01:26 +00:00
Added favicon and logo to website
This commit is contained in:
danielvici123
145
app/generator/password/page.tsx
Normal file
145
app/generator/password/page.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function PasswordGenerator() {
|
||||
const [password, setPassword] = useState('')
|
||||
const [length, setLength] = useState(16)
|
||||
const [includeNumbers, setIncludeNumbers] = useState(true)
|
||||
const [includeSymbols, setIncludeSymbols] = useState(true)
|
||||
const [includeLetters, setIncludeLetters] = useState(true)
|
||||
|
||||
const getStrengthDescription = (len: number) => {
|
||||
if (len < 8) return { text: 'Very Weak - Not recommended for security', color: 'text-red-500' }
|
||||
if (len < 12) return { text: 'Weak - Only for low-security needs', color: 'text-orange-500' }
|
||||
if (len < 16) return { text: 'Moderate - Good for most purposes', color: 'text-yellow-500' }
|
||||
if (len < 20) return { text: 'Strong - Recommended for sensitive data', color: 'text-green-500' }
|
||||
return { text: 'Very Strong - Excellent for critical security', color: 'text-emerald-500' }
|
||||
}
|
||||
|
||||
const generatePassword = () => {
|
||||
const numbers = '0123456789'
|
||||
const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?'
|
||||
const letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
|
||||
|
||||
// Ensure at least one type is selected
|
||||
if (!includeLetters && !includeNumbers && !includeSymbols) {
|
||||
setIncludeLetters(true)
|
||||
return
|
||||
}
|
||||
|
||||
let chars = ''
|
||||
if (includeLetters) chars += letters
|
||||
if (includeNumbers) chars += numbers
|
||||
if (includeSymbols) chars += symbols
|
||||
|
||||
let newPassword = ''
|
||||
for (let i = 0; i < length; i++) {
|
||||
newPassword += chars[Math.floor(Math.random() * chars.length)]
|
||||
}
|
||||
|
||||
setPassword(newPassword)
|
||||
}
|
||||
|
||||
const strength = getStrengthDescription(length)
|
||||
|
||||
return (
|
||||
<main className="min-h-screen p-8 pt-24">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-4xl font-bold mb-8 text-white">Password Generator</h1>
|
||||
|
||||
<div className="bg-zinc-800 rounded-lg shadow-md p-6">
|
||||
<div className="prose prose-invert max-w-none mb-6">
|
||||
<p className="text-gray-300">
|
||||
Generate secure passwords with customizable options. For maximum security, we recommend:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-gray-300 space-y-1">
|
||||
<li>Use at least 16 characters for sensitive accounts</li>
|
||||
<li>Include a mix of letters, numbers, and special characters</li>
|
||||
<li>Use different passwords for each account</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Password Length: {length}
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="4"
|
||||
max="64"
|
||||
value={length}
|
||||
onChange={(e) => setLength(Number(e.target.value))}
|
||||
className="w-full mt-2"
|
||||
/>
|
||||
<p className={`text-sm mt-2 ${strength.color}`}>
|
||||
{strength.text}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeLetters}
|
||||
onChange={(e) => setIncludeLetters(e.target.checked)}
|
||||
className="rounded border-gray-600 bg-zinc-700 text-blue-500 mr-2 focus:ring-blue-500 focus:ring-offset-zinc-800"
|
||||
/>
|
||||
<span className="text-gray-300">Letters</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeNumbers}
|
||||
onChange={(e) => setIncludeNumbers(e.target.checked)}
|
||||
className="rounded border-gray-600 bg-zinc-700 text-blue-500 mr-2 focus:ring-blue-500 focus:ring-offset-zinc-800"
|
||||
/>
|
||||
<span className="text-gray-300">Numbers</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeSymbols}
|
||||
onChange={(e) => setIncludeSymbols(e.target.checked)}
|
||||
className="rounded border-gray-600 bg-zinc-700 text-blue-500 mr-2 focus:ring-blue-500 focus:ring-offset-zinc-800"
|
||||
/>
|
||||
<span className="text-gray-300">Special Characters</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={generatePassword}
|
||||
className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Generate Password
|
||||
</button>
|
||||
|
||||
{password && (
|
||||
<div className="mt-4">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Generated Password:
|
||||
</label>
|
||||
<div className="flex">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={password}
|
||||
className="flex-1 bg-zinc-700 text-white rounded-l-md border border-gray-600 p-2"
|
||||
/>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(password)}
|
||||
className="bg-zinc-700 px-4 rounded-r-md border-t border-r border-b border-gray-600 text-gray-300 hover:bg-zinc-600 transition-colors"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
143
app/generator/qr/page.tsx
Normal file
143
app/generator/qr/page.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
'use client'
|
||||
import { useState, useRef } from 'react'
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
export default function QRGenerator() {
|
||||
const [text, setText] = useState('')
|
||||
const [qrDataUrl, setQrDataUrl] = useState('')
|
||||
const [size, setSize] = useState(300)
|
||||
const [darkColor, setDarkColor] = useState('#000000')
|
||||
const [lightColor, setLightColor] = useState('#FFFFFF')
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
|
||||
const generateQR = async () => {
|
||||
if (!text) return
|
||||
|
||||
try {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
await QRCode.toCanvas(canvas, text, {
|
||||
width: size,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: darkColor,
|
||||
light: lightColor
|
||||
}
|
||||
})
|
||||
|
||||
setQrDataUrl(canvas.toDataURL('image/png'))
|
||||
} catch (err) {
|
||||
console.error('Error generating QR code:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const downloadQR = () => {
|
||||
if (!qrDataUrl) return
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.download = 'qrcode.png'
|
||||
link.href = qrDataUrl
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen p-8 pt-24">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-4xl font-bold mb-8 text-white">QR Code Generator</h1>
|
||||
|
||||
<div className="bg-zinc-800 rounded-lg shadow-md p-6">
|
||||
<div className="prose prose-invert max-w-none mb-6">
|
||||
<p className="text-gray-300">
|
||||
Generate QR codes for text, URLs, or any other content. Customize the size and colors,
|
||||
then download the QR code as a PNG image.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Text or URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder="Enter text or URL"
|
||||
className="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Size: {size}x{size} pixels
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="100"
|
||||
max="1000"
|
||||
step="50"
|
||||
value={size}
|
||||
onChange={(e) => setSize(Number(e.target.value))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
QR Code Color
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
value={darkColor}
|
||||
onChange={(e) => setDarkColor(e.target.value)}
|
||||
className="w-full h-10 rounded-md cursor-pointer bg-zinc-700 p-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Background Color
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
value={lightColor}
|
||||
onChange={(e) => setLightColor(e.target.value)}
|
||||
className="w-full h-10 rounded-md cursor-pointer bg-zinc-700 p-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={generateQR}
|
||||
className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Generate QR Code
|
||||
</button>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<canvas ref={canvasRef} className="hidden" />
|
||||
{qrDataUrl && (
|
||||
<div className="space-y-4">
|
||||
<img
|
||||
src={qrDataUrl}
|
||||
alt="Generated QR Code"
|
||||
className="mx-auto border-4 border-white rounded-lg"
|
||||
/>
|
||||
<button
|
||||
onClick={downloadQR}
|
||||
className="w-full bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition-colors"
|
||||
>
|
||||
Download QR Code
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user