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
155
app/converter/color/page.tsx
Normal file
155
app/converter/color/page.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
'use client'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
type ColorFormats = {
|
||||
hex: string
|
||||
rgb: string
|
||||
hsl: string
|
||||
}
|
||||
|
||||
export default function ColorConverter() {
|
||||
const [color, setColor] = useState('#000000')
|
||||
const [formats, setFormats] = useState<ColorFormats>({
|
||||
hex: '#000000',
|
||||
rgb: 'rgb(0, 0, 0)',
|
||||
hsl: 'hsl(0, 0%, 0%)'
|
||||
})
|
||||
|
||||
const hexToRgb = (hex: string): number[] => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
return result
|
||||
? [
|
||||
parseInt(result[1], 16),
|
||||
parseInt(result[2], 16),
|
||||
parseInt(result[3], 16)
|
||||
]
|
||||
: [0, 0, 0]
|
||||
}
|
||||
|
||||
const rgbToHsl = (r: number, g: number, b: number): number[] => {
|
||||
r /= 255
|
||||
g /= 255
|
||||
b /= 255
|
||||
|
||||
const max = Math.max(r, g, b)
|
||||
const min = Math.min(r, g, b)
|
||||
let h = 0
|
||||
let s = 0
|
||||
const l = (max + min) / 2
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
|
||||
|
||||
switch (max) {
|
||||
case r:
|
||||
h = (g - b) / d + (g < b ? 6 : 0)
|
||||
break
|
||||
case g:
|
||||
h = (b - r) / d + 2
|
||||
break
|
||||
case b:
|
||||
h = (r - g) / d + 4
|
||||
break
|
||||
}
|
||||
|
||||
h /= 6
|
||||
}
|
||||
|
||||
return [
|
||||
Math.round(h * 360),
|
||||
Math.round(s * 100),
|
||||
Math.round(l * 100)
|
||||
]
|
||||
}
|
||||
|
||||
const updateFormats = (hex: string) => {
|
||||
const rgb = hexToRgb(hex)
|
||||
const hsl = rgbToHsl(rgb[0], rgb[1], rgb[2])
|
||||
|
||||
setFormats({
|
||||
hex: hex,
|
||||
rgb: `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`,
|
||||
hsl: `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
updateFormats(color)
|
||||
}, [color])
|
||||
|
||||
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">Color Converter</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">
|
||||
Convert colors between different formats: HEX, RGB, and HSL.
|
||||
Use the color picker or enter values manually to see the conversions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
<div className="w-full">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Color Picker
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
value={color}
|
||||
onChange={(e) => setColor(e.target.value)}
|
||||
className="w-full h-12 rounded-md cursor-pointer bg-zinc-700 p-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-white">Color Values</h2>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="bg-zinc-900 p-4 rounded-lg">
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1">
|
||||
HEX
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={formats.hex}
|
||||
className="w-full bg-zinc-800 text-white rounded-md border border-gray-700 p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-900 p-4 rounded-lg">
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1">
|
||||
RGB
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={formats.rgb}
|
||||
className="w-full bg-zinc-800 text-white rounded-md border border-gray-700 p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-900 p-4 rounded-lg">
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1">
|
||||
HSL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={formats.hsl}
|
||||
className="w-full bg-zinc-800 text-white rounded-md border border-gray-700 p-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
173
app/converter/currency/page.tsx
Normal file
173
app/converter/currency/page.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
'use client'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
type ExchangeRates = {
|
||||
[key: string]: number
|
||||
}
|
||||
|
||||
const POPULAR_CURRENCIES = [
|
||||
{ code: 'USD', name: 'US Dollar' },
|
||||
{ code: 'EUR', name: 'Euro' },
|
||||
{ code: 'GBP', name: 'British Pound' },
|
||||
{ code: 'JPY', name: 'Japanese Yen' },
|
||||
{ code: 'CHF', name: 'Swiss Franc' },
|
||||
{ code: 'CAD', name: 'Canadian Dollar' },
|
||||
{ code: 'AUD', name: 'Australian Dollar' },
|
||||
{ code: 'CNY', name: 'Chinese Yuan' },
|
||||
]
|
||||
|
||||
export default function CurrencyConverter() {
|
||||
const [amount, setAmount] = useState('1')
|
||||
const [fromCurrency, setFromCurrency] = useState('EUR')
|
||||
const [toCurrency, setToCurrency] = useState('USD')
|
||||
const [rates, setRates] = useState<ExchangeRates>({})
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRates = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
// Using ExchangeRate-API (free tier)
|
||||
const response = await fetch('https://open.er-api.com/v6/latest/EUR')
|
||||
const data = await response.json()
|
||||
|
||||
if (data.rates) {
|
||||
setRates(data.rates)
|
||||
setLastUpdated(new Date())
|
||||
} else {
|
||||
throw new Error('Failed to fetch exchange rates')
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to load exchange rates. Please try again later.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchRates()
|
||||
}, [])
|
||||
|
||||
const convert = () => {
|
||||
if (!rates[fromCurrency] || !rates[toCurrency]) return '0.00'
|
||||
|
||||
const amountNum = parseFloat(amount)
|
||||
if (isNaN(amountNum)) return '0.00'
|
||||
|
||||
// Convert through EUR (base currency)
|
||||
const inEUR = amountNum / rates[fromCurrency]
|
||||
const result = inEUR * rates[toCurrency]
|
||||
|
||||
return result.toFixed(2)
|
||||
}
|
||||
|
||||
const handleSwap = () => {
|
||||
setFromCurrency(toCurrency)
|
||||
setToCurrency(fromCurrency)
|
||||
}
|
||||
|
||||
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">Currency Converter</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">
|
||||
Convert between different currencies using real-time exchange rates.
|
||||
{lastUpdated && (
|
||||
<span className="block text-sm text-gray-400 mt-1">
|
||||
Last updated: {lastUpdated.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-blue-400">Loading exchange rates...</div>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-red-500 text-sm p-3 bg-red-500/10 rounded-md border border-red-500/20">
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Amount
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
className="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end gap-2">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
From
|
||||
</label>
|
||||
<select
|
||||
value={fromCurrency}
|
||||
onChange={(e) => setFromCurrency(e.target.value)}
|
||||
className="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2 text-sm"
|
||||
>
|
||||
{POPULAR_CURRENCIES.map(currency => (
|
||||
<option key={currency.code} value={currency.code} className="text-sm">
|
||||
{currency.code} - {currency.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSwap}
|
||||
className="bg-zinc-700 text-white p-2 rounded-md hover:bg-zinc-600 transition-colors mb-0.5"
|
||||
>
|
||||
⇄
|
||||
</button>
|
||||
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
To
|
||||
</label>
|
||||
<select
|
||||
value={toCurrency}
|
||||
onChange={(e) => setToCurrency(e.target.value)}
|
||||
className="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2 text-sm"
|
||||
>
|
||||
{POPULAR_CURRENCIES.map(currency => (
|
||||
<option key={currency.code} value={currency.code} className="text-sm">
|
||||
{currency.code} - {currency.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-900 p-6 rounded-lg text-center">
|
||||
<div className="text-sm text-gray-400 mb-2">Result</div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{amount} {fromCurrency} = {convert()} {toCurrency}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400 mt-2">
|
||||
1 {fromCurrency} = {(rates[toCurrency] / rates[fromCurrency]).toFixed(4)} {toCurrency}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
131
app/converter/image/page.tsx
Normal file
131
app/converter/image/page.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
'use client'
|
||||
import { useState, useCallback } from 'react'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
|
||||
export default function ImageConverter() {
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||
const [convertTo, setConvertTo] = useState('png')
|
||||
const [isConverting, setIsConverting] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
setError(null)
|
||||
if (acceptedFiles[0]) {
|
||||
setSelectedFile(acceptedFiles[0])
|
||||
}
|
||||
}, [])
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept: {
|
||||
'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp']
|
||||
},
|
||||
multiple: false
|
||||
})
|
||||
|
||||
const handleConvert = async () => {
|
||||
if (!selectedFile) return
|
||||
setError(null)
|
||||
setIsConverting(true)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', selectedFile)
|
||||
formData.append('format', convertTo)
|
||||
|
||||
const response = await fetch('/api/convert', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.error || 'Conversion failed')
|
||||
}
|
||||
|
||||
const blob = await response.blob()
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `picture_converted_to.${convertTo}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
document.body.removeChild(a)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred')
|
||||
} finally {
|
||||
setIsConverting(false)
|
||||
}
|
||||
}
|
||||
|
||||
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">Image Converter</h1>
|
||||
|
||||
<div className="bg-zinc-800 rounded-lg shadow-md p-6">
|
||||
<div className="space-y-6">
|
||||
{/* Drag & Drop Zone */}
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors
|
||||
${isDragActive ? 'border-blue-500 bg-blue-500/10' : 'border-gray-600 hover:border-blue-500'}
|
||||
`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<p className="text-gray-300">
|
||||
{isDragActive
|
||||
? 'Drop the image here...'
|
||||
: 'Drag & drop an image here, or click to select'}
|
||||
</p>
|
||||
{selectedFile && (
|
||||
<p className="mt-2 text-blue-400">
|
||||
Selected: {selectedFile.name}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Format Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Target Format
|
||||
</label>
|
||||
<select
|
||||
value={convertTo}
|
||||
onChange={(e) => setConvertTo(e.target.value)}
|
||||
className="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2"
|
||||
>
|
||||
<option value="png">PNG</option>
|
||||
<option value="jpg">JPG</option>
|
||||
<option value="webp">WebP</option>
|
||||
<option value="gif">GIF</option>
|
||||
<option value="ico">ICO</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="text-red-500 text-sm p-3 bg-red-500/10 rounded-md border border-red-500/20">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Convert Button */}
|
||||
<button
|
||||
onClick={handleConvert}
|
||||
disabled={!selectedFile || isConverting}
|
||||
className={`w-full py-2 px-4 rounded-md text-white transition-colors
|
||||
${!selectedFile || isConverting
|
||||
? 'bg-blue-500/50 cursor-not-allowed'
|
||||
: 'bg-blue-500 hover:bg-blue-600'}
|
||||
`}
|
||||
>
|
||||
{isConverting ? 'Converting...' : 'Convert'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
143
app/converter/number/page.tsx
Normal file
143
app/converter/number/page.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function NumberConverter() {
|
||||
const [value, setValue] = useState('')
|
||||
const [fromBase, setFromBase] = useState('10')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const isValidNumber = (num: string, base: string) => {
|
||||
const validChars = {
|
||||
'2': /^[01]+$/,
|
||||
'10': /^[0-9]+$/,
|
||||
'16': /^[0-9A-Fa-f]+$/
|
||||
}
|
||||
return validChars[base as keyof typeof validChars].test(num)
|
||||
}
|
||||
|
||||
const convert = (input: string, from: string) => {
|
||||
if (!input) return { binary: '', decimal: '', hex: '' }
|
||||
|
||||
try {
|
||||
if (!isValidNumber(input, from)) {
|
||||
throw new Error('Invalid number for selected base')
|
||||
}
|
||||
|
||||
const decimal = parseInt(input, parseInt(from))
|
||||
if (isNaN(decimal)) throw new Error('Invalid number')
|
||||
|
||||
return {
|
||||
binary: decimal.toString(2),
|
||||
decimal: decimal.toString(10),
|
||||
hex: decimal.toString(16).toUpperCase()
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Invalid input')
|
||||
return { binary: '', decimal: '', hex: '' }
|
||||
}
|
||||
}
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue(e.target.value)
|
||||
setError('')
|
||||
}
|
||||
|
||||
const results = convert(value, fromBase)
|
||||
|
||||
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">Number Converter</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">
|
||||
Convert numbers between binary (base 2), decimal (base 10), and hexadecimal (base 16) formats.
|
||||
Enter a number in any base and see its equivalent representations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Input Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter a number"
|
||||
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">
|
||||
Input Base
|
||||
</label>
|
||||
<select
|
||||
value={fromBase}
|
||||
onChange={(e) => setFromBase(e.target.value)}
|
||||
className="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2"
|
||||
>
|
||||
<option value="2">Binary (Base 2)</option>
|
||||
<option value="10">Decimal (Base 10)</option>
|
||||
<option value="16">Hexadecimal (Base 16)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-red-500 text-sm p-3 bg-red-500/10 rounded-md border border-red-500/20">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-white">Results</h2>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="bg-zinc-900 p-4 rounded-lg">
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1">
|
||||
Binary (Base 2)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={results.binary}
|
||||
className="w-full bg-zinc-800 text-white rounded-md border border-gray-700 p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-900 p-4 rounded-lg">
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1">
|
||||
Decimal (Base 10)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={results.decimal}
|
||||
className="w-full bg-zinc-800 text-white rounded-md border border-gray-700 p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-900 p-4 rounded-lg">
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1">
|
||||
Hexadecimal (Base 16)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={results.hex}
|
||||
className="w-full bg-zinc-800 text-white rounded-md border border-gray-700 p-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user