Add 8 new tools: Hash Verifier, URL Tool, String Utils, Cron Explainer, IP Calc, Lorem Ipsum, CSV Viewer, Notes
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nirodan
+17
-1
@@ -14,6 +14,14 @@ import MarkdownTool from './components/MarkdownTool';
|
||||
import ColorConverterTool from './components/ColorConverterTool';
|
||||
import JsonFormatterTool from './components/JsonFormatterTool';
|
||||
import RegexTesterTool from './components/RegexTesterTool';
|
||||
import HashVerifierTool from './components/HashVerifierTool';
|
||||
import UrlTool from './components/UrlTool';
|
||||
import StringUtilsTool from './components/StringUtilsTool';
|
||||
import CronExplainerTool from './components/CronExplainerTool';
|
||||
import IpCalcTool from './components/IpCalcTool';
|
||||
import LoremIpsumTool from './components/LoremIpsumTool';
|
||||
import CsvViewerTool from './components/CsvViewerTool';
|
||||
import NotesTool from './components/NotesTool';
|
||||
import NavBar from './components/NavBar';
|
||||
import ToolOverview from './components/ToolOverview';
|
||||
import AdminDashboard from './components/AdminDashboard';
|
||||
@@ -60,7 +68,15 @@ function App() {
|
||||
<Route path="/tools/markdown" element={isLoggedIn ? <MarkdownTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/color" element={isLoggedIn ? <ColorConverterTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/json" element={isLoggedIn ? <JsonFormatterTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/regex" element={isLoggedIn ? <RegexTesterTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/regex" element={isLoggedIn ? <RegexTesterTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/hashverify" element={isLoggedIn ? <HashVerifierTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/url" element={isLoggedIn ? <UrlTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/string" element={isLoggedIn ? <StringUtilsTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/cron" element={isLoggedIn ? <CronExplainerTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/ipcalc" element={isLoggedIn ? <IpCalcTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/lorem" element={isLoggedIn ? <LoremIpsumTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/csv" element={isLoggedIn ? <CsvViewerTool /> : <Navigate to="/login" />} />
|
||||
<Route path="/tools/notes" element={isLoggedIn ? <NotesTool /> : <Navigate to="/login" />} />
|
||||
<Route
|
||||
path="/admin"
|
||||
element={
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
import { useState } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
const sectionBox = {
|
||||
marginTop: '14px',
|
||||
padding: '14px',
|
||||
background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '12px',
|
||||
};
|
||||
|
||||
const EXAMPLES = [
|
||||
{ label: '* * * * *', value: '* * * * *' },
|
||||
{ label: '0 9 * * 1-5', value: '0 9 * * 1-5' },
|
||||
{ label: '0 0 1 * *', value: '0 0 1 * *' },
|
||||
{ label: '*/15 * * * *', value: '*/15 * * * *' },
|
||||
];
|
||||
|
||||
const FIELD_LABELS = [
|
||||
{ key: 'minute', label: 'Minute' },
|
||||
{ key: 'hour', label: 'Stunde' },
|
||||
{ key: 'day', label: 'Tag' },
|
||||
{ key: 'month', label: 'Monat' },
|
||||
{ key: 'weekday', label: 'Wochentag' },
|
||||
];
|
||||
|
||||
function CronExplainerTool() {
|
||||
const [expression, setExpression] = useState('');
|
||||
const [result, setResult] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const explain = async (expr) => {
|
||||
const val = expr !== undefined ? expr : expression;
|
||||
setError('');
|
||||
setResult(null);
|
||||
if (!val.trim()) {
|
||||
setError('Bitte Cron-Ausdruck eingeben.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await axios.post('/api/cron/explain', { expression: val });
|
||||
setResult(res.data);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || err.response?.data?.message || 'Ungültiger Cron-Ausdruck');
|
||||
}
|
||||
};
|
||||
|
||||
const useExample = (val) => {
|
||||
setExpression(val);
|
||||
setError('');
|
||||
setResult(null);
|
||||
explain(val);
|
||||
};
|
||||
|
||||
const formatDate = (iso) => {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString('de-DE', {
|
||||
weekday: 'short', day: '2-digit', month: '2-digit',
|
||||
year: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h2>Cron Erklärer</h2>
|
||||
<p style={{ color: 'var(--muted)', marginBottom: '16px', fontSize: '0.95rem' }}>
|
||||
Cron-Ausdrücke (5 Felder) analysieren und auf Deutsch erklären.
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '10px' }}>
|
||||
{EXAMPLES.map(({ label, value }) => (
|
||||
<button
|
||||
key={value}
|
||||
className="ghost"
|
||||
onClick={() => useExample(value)}
|
||||
style={{ fontFamily: 'monospace', fontSize: '0.85rem' }}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={expression}
|
||||
onChange={(e) => { setExpression(e.target.value); setResult(null); setError(''); }}
|
||||
placeholder="z.B. 0 9 * * 1-5"
|
||||
style={{ fontFamily: 'monospace', flex: 1 }}
|
||||
onKeyDown={(e) => e.key === 'Enter' && explain()}
|
||||
/>
|
||||
<button onClick={() => explain()} style={{ flexShrink: 0 }}>Erklären</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}
|
||||
|
||||
{result && (
|
||||
<>
|
||||
<div style={{ ...sectionBox, borderColor: 'var(--accent)' }}>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '0.8rem', marginBottom: '4px', fontWeight: 600 }}>Erklärung</p>
|
||||
<p style={{ color: 'var(--text)', fontWeight: 600, fontSize: '1.05rem' }}>{result.explanation}</p>
|
||||
</div>
|
||||
|
||||
<div style={sectionBox}>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '0.8rem', marginBottom: '10px', fontWeight: 600 }}>Felder</p>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: 'left', padding: '6px 10px', color: 'var(--muted)', fontSize: '0.8rem', fontWeight: 600, borderBottom: '1px solid var(--border)' }}>Feld</th>
|
||||
<th style={{ textAlign: 'left', padding: '6px 10px', color: 'var(--muted)', fontSize: '0.8rem', fontWeight: 600, borderBottom: '1px solid var(--border)' }}>Ausdruck</th>
|
||||
<th style={{ textAlign: 'left', padding: '6px 10px', color: 'var(--muted)', fontSize: '0.8rem', fontWeight: 600, borderBottom: '1px solid var(--border)' }}>Bedeutung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{FIELD_LABELS.map(({ key, label }, i) => (
|
||||
<tr key={key} style={{ background: i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.02)' }}>
|
||||
<td style={{ padding: '8px 10px', color: 'var(--accent)', fontWeight: 600, fontSize: '0.9rem' }}>{label}</td>
|
||||
<td style={{ padding: '8px 10px', fontFamily: 'monospace', color: 'var(--text)', fontSize: '0.9rem' }}>
|
||||
{expression.split(/\s+/)[i] || '—'}
|
||||
</td>
|
||||
<td style={{ padding: '8px 10px', color: 'var(--text)', fontSize: '0.9rem' }}>
|
||||
{result.fields[key]}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{result.next_runs && result.next_runs.length > 0 && (
|
||||
<div style={sectionBox}>
|
||||
<p style={{ color: 'var(--muted)', fontSize: '0.8rem', marginBottom: '10px', fontWeight: 600 }}>Nächste 5 Ausführungen</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||
{result.next_runs.map((run, i) => (
|
||||
<div key={run} style={{
|
||||
display: 'flex', alignItems: 'center', gap: '10px',
|
||||
padding: '8px 12px',
|
||||
background: i === 0 ? 'rgba(34,211,238,0.06)' : 'transparent',
|
||||
borderRadius: '8px',
|
||||
border: i === 0 ? '1px solid rgba(34,211,238,0.2)' : '1px solid transparent',
|
||||
}}>
|
||||
<span style={{ color: 'var(--muted)', width: '20px', fontSize: '0.85rem' }}>#{i + 1}</span>
|
||||
<span style={{ fontFamily: 'monospace', color: i === 0 ? 'var(--accent)' : 'var(--text)', fontSize: '0.9rem' }}>
|
||||
{formatDate(run)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CronExplainerTool;
|
||||
@@ -0,0 +1,158 @@
|
||||
import { useState } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
const DELIMITERS = [
|
||||
{ label: 'Komma (,)', value: ',' },
|
||||
{ label: 'Semikolon (;)', value: ';' },
|
||||
{ label: 'Tab', value: '\\t' },
|
||||
{ label: 'Pipe (|)', value: '|' },
|
||||
];
|
||||
|
||||
function CsvViewerTool() {
|
||||
const [text, setText] = useState('');
|
||||
const [delimiter, setDelimiter] = useState(',');
|
||||
const [result, setResult] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
const [sortCol, setSortCol] = useState(null);
|
||||
const [sortAsc, setSortAsc] = useState(true);
|
||||
|
||||
const parse = async () => {
|
||||
setError('');
|
||||
setResult(null);
|
||||
setSortCol(null);
|
||||
if (!text.trim()) {
|
||||
setError('Bitte CSV-Inhalt eingeben.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await axios.post('/api/csv/parse', { text, delimiter });
|
||||
setResult(res.data);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Fehler beim Verarbeiten des CSV');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (colIdx) => {
|
||||
if (sortCol === colIdx) {
|
||||
setSortAsc(!sortAsc);
|
||||
} else {
|
||||
setSortCol(colIdx);
|
||||
setSortAsc(true);
|
||||
}
|
||||
};
|
||||
|
||||
const getSortedRows = () => {
|
||||
if (!result) return [];
|
||||
if (sortCol === null) return result.rows;
|
||||
return [...result.rows].sort((a, b) => {
|
||||
const av = a[sortCol] ?? '';
|
||||
const bv = b[sortCol] ?? '';
|
||||
const numA = parseFloat(av);
|
||||
const numB = parseFloat(bv);
|
||||
if (!isNaN(numA) && !isNaN(numB)) {
|
||||
return sortAsc ? numA - numB : numB - numA;
|
||||
}
|
||||
return sortAsc ? av.localeCompare(bv) : bv.localeCompare(av);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h2>CSV Viewer</h2>
|
||||
<p style={{ color: 'var(--muted)', marginBottom: '16px', fontSize: '0.95rem' }}>
|
||||
CSV-Daten einfügen und als Tabelle anzeigen.
|
||||
</p>
|
||||
|
||||
<textarea
|
||||
rows={6}
|
||||
value={text}
|
||||
onChange={(e) => { setText(e.target.value); setResult(null); setError(''); }}
|
||||
placeholder="CSV-Inhalt hier einfügen..."
|
||||
style={{ fontFamily: 'monospace', resize: 'vertical' }}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginTop: '8px', flexWrap: 'wrap' }}>
|
||||
<select value={delimiter} onChange={(e) => setDelimiter(e.target.value)} style={{ margin: 0 }}>
|
||||
{DELIMITERS.map(({ label, value }) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={parse}>Anzeigen</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}
|
||||
|
||||
{result && (
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
{result.truncated && (
|
||||
<div style={{
|
||||
padding: '8px 14px', background: 'rgba(245,158,11,0.1)',
|
||||
border: '1px solid rgba(245,158,11,0.3)', borderRadius: '10px',
|
||||
color: '#f59e0b', fontSize: '0.85rem', marginBottom: '10px',
|
||||
}}>
|
||||
Hinweis: Nur die ersten 500 von {result.total_rows} Zeilen werden angezeigt.
|
||||
</div>
|
||||
)}
|
||||
<p style={{ color: 'var(--muted)', fontSize: '0.85rem', marginBottom: '8px' }}>
|
||||
{result.rows.length} Zeilen · {result.headers.length} Spalten
|
||||
{!result.truncated && result.total_rows > 0 && ` · ${result.total_rows} gesamt`}
|
||||
</p>
|
||||
<div style={{ overflowX: 'auto', borderRadius: '12px', border: '1px solid var(--border)' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.88rem' }}>
|
||||
<thead>
|
||||
<tr style={{ background: 'var(--surface-2)' }}>
|
||||
<th style={{
|
||||
padding: '8px 10px', textAlign: 'right', color: 'var(--muted)',
|
||||
fontWeight: 600, borderBottom: '1px solid var(--border)',
|
||||
fontSize: '0.78rem', width: '40px',
|
||||
}}>#</th>
|
||||
{result.headers.map((h, i) => (
|
||||
<th
|
||||
key={i}
|
||||
onClick={() => handleSort(i)}
|
||||
style={{
|
||||
padding: '8px 12px', textAlign: 'left', color: 'var(--text)',
|
||||
fontWeight: 600, borderBottom: '1px solid var(--border)',
|
||||
cursor: 'pointer', userSelect: 'none',
|
||||
background: sortCol === i ? 'rgba(34,211,238,0.06)' : 'transparent',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{h || `Spalte ${i + 1}`}
|
||||
{sortCol === i && (
|
||||
<span style={{ marginLeft: '4px', color: 'var(--accent)' }}>
|
||||
{sortAsc ? '↑' : '↓'}
|
||||
</span>
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{getSortedRows().map((row, ri) => (
|
||||
<tr key={ri} style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<td style={{
|
||||
padding: '6px 10px', textAlign: 'right',
|
||||
color: 'var(--muted)', fontSize: '0.78rem',
|
||||
}}>{ri + 1}</td>
|
||||
{result.headers.map((_, ci) => (
|
||||
<td key={ci} style={{
|
||||
padding: '6px 12px', color: 'var(--text)',
|
||||
fontFamily: 'monospace', maxWidth: '300px',
|
||||
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{row[ci] ?? ''}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CsvViewerTool;
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useState } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
function HashVerifierTool() {
|
||||
const [text, setText] = useState('');
|
||||
const [hash, setHash] = useState('');
|
||||
const [algo, setAlgo] = useState('sha256');
|
||||
const [result, setResult] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const verify = async () => {
|
||||
setError('');
|
||||
setResult(null);
|
||||
if (!text || !hash) {
|
||||
setError('Bitte Text und Hash eingeben.');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.post('/api/hash/verify', { text, hash, algorithm: algo });
|
||||
setResult(res.data.match);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Fehler bei der Verifikation');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h2>Hash Verifier</h2>
|
||||
<p style={{ color: 'var(--muted)', marginBottom: '16px', fontSize: '0.95rem' }}>
|
||||
Prüft, ob ein Text mit einem gegebenen Hash übereinstimmt.
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => { setText(e.target.value); setResult(null); setError(''); }}
|
||||
placeholder="Originaltext"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={hash}
|
||||
onChange={(e) => { setHash(e.target.value); setResult(null); setError(''); }}
|
||||
placeholder="Hash-Wert"
|
||||
style={{ marginTop: '8px', fontFamily: 'monospace' }}
|
||||
/>
|
||||
|
||||
<select
|
||||
value={algo}
|
||||
onChange={(e) => { setAlgo(e.target.value); setResult(null); }}
|
||||
style={{ marginTop: '8px' }}
|
||||
>
|
||||
<option value="md5">MD5</option>
|
||||
<option value="sha256">SHA256</option>
|
||||
<option value="bcrypt">bcrypt</option>
|
||||
</select>
|
||||
|
||||
<button onClick={verify} disabled={loading} style={{ marginTop: '8px' }}>
|
||||
{loading ? 'Prüfen...' : 'Prüfen'}
|
||||
</button>
|
||||
|
||||
{error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}
|
||||
|
||||
{result !== null && (
|
||||
<div style={{
|
||||
marginTop: '24px',
|
||||
padding: '32px',
|
||||
background: 'var(--surface-2)',
|
||||
border: `2px solid ${result ? '#22c55e' : '#ef4444'}`,
|
||||
borderRadius: '16px',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<div style={{ fontSize: '3rem', marginBottom: '8px' }}>
|
||||
{result ? '✓' : '✗'}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: '1.4rem',
|
||||
fontWeight: 700,
|
||||
color: result ? '#22c55e' : '#ef4444',
|
||||
}}>
|
||||
{result ? 'Übereinstimmung' : 'Kein Match'}
|
||||
</div>
|
||||
<div style={{ color: 'var(--muted)', marginTop: '6px', fontSize: '0.9rem' }}>
|
||||
Algorithmus: {algo.toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HashVerifierTool;
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useState } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
const EXAMPLES = ['192.168.0.0/24', '10.0.0.0/8', '172.16.0.0/12'];
|
||||
|
||||
const INFO_FIELDS = [
|
||||
{ key: 'network', label: 'Netzwerkadresse' },
|
||||
{ key: 'broadcast', label: 'Broadcast-Adresse' },
|
||||
{ key: 'netmask', label: 'Subnetzmaske' },
|
||||
{ key: 'wildcard', label: 'Wildcard-Maske' },
|
||||
{ key: 'first_host', label: 'Erste nutzbare IP' },
|
||||
{ key: 'last_host', label: 'Letzte nutzbare IP' },
|
||||
{ key: 'total_hosts', label: 'Nutzbare Hosts' },
|
||||
{ key: 'prefix_length', label: 'Präfixlänge', format: (v) => `/${v}` },
|
||||
{ key: 'ip_class', label: 'IP-Klasse' },
|
||||
];
|
||||
|
||||
function IpCalcTool() {
|
||||
const [cidr, setCidr] = useState('');
|
||||
const [result, setResult] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
const [copiedKey, setCopiedKey] = useState('');
|
||||
|
||||
const calculate = async (val) => {
|
||||
const input = val !== undefined ? val : cidr;
|
||||
setError('');
|
||||
setResult(null);
|
||||
if (!input.trim()) {
|
||||
setError('Bitte CIDR eingeben.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await axios.post('/api/ip/calculate', { cidr: input });
|
||||
setResult(res.data);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Fehler bei der Berechnung');
|
||||
}
|
||||
};
|
||||
|
||||
const useExample = (val) => {
|
||||
setCidr(val);
|
||||
setError('');
|
||||
setResult(null);
|
||||
calculate(val);
|
||||
};
|
||||
|
||||
const copy = (key, text) => {
|
||||
navigator.clipboard.writeText(String(text));
|
||||
setCopiedKey(key);
|
||||
setTimeout(() => setCopiedKey(''), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h2>IP / Subnetz Rechner</h2>
|
||||
<p style={{ color: 'var(--muted)', marginBottom: '16px', fontSize: '0.95rem' }}>
|
||||
CIDR-Netzwerke berechnen und analysieren.
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '10px' }}>
|
||||
{EXAMPLES.map((ex) => (
|
||||
<button key={ex} className="ghost" onClick={() => useExample(ex)}
|
||||
style={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
||||
{ex}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={cidr}
|
||||
onChange={(e) => { setCidr(e.target.value); setResult(null); setError(''); }}
|
||||
placeholder="192.168.1.0/24"
|
||||
style={{ fontFamily: 'monospace', flex: 1 }}
|
||||
onKeyDown={(e) => e.key === 'Enter' && calculate()}
|
||||
/>
|
||||
<button onClick={() => calculate()} style={{ flexShrink: 0 }}>Berechnen</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}
|
||||
|
||||
{result && (
|
||||
<div style={{
|
||||
marginTop: '16px',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
|
||||
gap: '10px',
|
||||
}}>
|
||||
{INFO_FIELDS.map(({ key, label, format }) => {
|
||||
const value = format ? format(result[key]) : result[key];
|
||||
return (
|
||||
<div key={key} style={{
|
||||
padding: '12px 14px',
|
||||
background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '4px',
|
||||
}}>
|
||||
<span style={{ fontSize: '0.78rem', color: 'var(--muted)', fontWeight: 600 }}>{label}</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>
|
||||
<span style={{ fontFamily: 'monospace', color: 'var(--text)', fontSize: '0.95rem', wordBreak: 'break-all' }}>
|
||||
{String(value)}
|
||||
</span>
|
||||
<button
|
||||
className="ghost"
|
||||
onClick={() => copy(key, value)}
|
||||
style={{ flexShrink: 0, margin: 0, padding: '4px 10px', fontSize: '0.78rem' }}
|
||||
>
|
||||
{copiedKey === key ? '✓' : 'Kopieren'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IpCalcTool;
|
||||
@@ -0,0 +1,92 @@
|
||||
import { useState } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
const TYPES = [
|
||||
{ value: 'words', label: 'Wörter' },
|
||||
{ value: 'sentences', label: 'Sätze' },
|
||||
{ value: 'paragraphs', label: 'Absätze' },
|
||||
];
|
||||
|
||||
function LoremIpsumTool() {
|
||||
const [type, setType] = useState('sentences');
|
||||
const [count, setCount] = useState(3);
|
||||
const [result, setResult] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const generate = async () => {
|
||||
setError('');
|
||||
setResult('');
|
||||
try {
|
||||
const res = await axios.post('/api/lorem/generate', { type, count });
|
||||
setResult(res.data.text);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Fehler bei der Generierung');
|
||||
}
|
||||
};
|
||||
|
||||
const copy = () => {
|
||||
navigator.clipboard.writeText(result);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h2>Lorem Ipsum Generator</h2>
|
||||
<p style={{ color: 'var(--muted)', marginBottom: '16px', fontSize: '0.95rem' }}>
|
||||
Blindtext für Designs und Mockups generieren.
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'flex', gap: '6px', marginBottom: '12px' }}>
|
||||
{TYPES.map(({ value, label }) => (
|
||||
<button
|
||||
key={value}
|
||||
className={type === value ? '' : 'ghost'}
|
||||
onClick={() => setType(value)}
|
||||
style={{ margin: 0 }}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
|
||||
<label style={{ color: 'var(--text)', fontWeight: 600, fontSize: '0.9rem', whiteSpace: 'nowrap' }}>
|
||||
Anzahl:
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={20}
|
||||
value={count}
|
||||
onChange={(e) => setCount(Math.max(1, Math.min(20, Number(e.target.value))))}
|
||||
style={{ width: '80px' }}
|
||||
/>
|
||||
<span style={{ color: 'var(--muted)', fontSize: '0.85rem' }}>(1–20)</span>
|
||||
</div>
|
||||
|
||||
<button onClick={generate}>Generieren</button>
|
||||
|
||||
{error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}
|
||||
|
||||
{result && (
|
||||
<div style={{ marginTop: '14px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '6px' }}>
|
||||
<button className="ghost" onClick={copy} style={{ margin: 0, padding: '6px 14px', fontSize: '0.85rem' }}>
|
||||
{copied ? 'Kopiert!' : 'Kopieren'}
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
rows={10}
|
||||
readOnly
|
||||
value={result}
|
||||
style={{ resize: 'vertical', color: 'var(--muted)', fontFamily: 'inherit', lineHeight: '1.6' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoremIpsumTool;
|
||||
@@ -0,0 +1,225 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
const LANGUAGES = [
|
||||
{ value: 'text', label: 'Text' },
|
||||
{ value: 'python', label: 'Python' },
|
||||
{ value: 'javascript', label: 'JavaScript' },
|
||||
{ value: 'sql', label: 'SQL' },
|
||||
{ value: 'bash', label: 'Bash' },
|
||||
{ value: 'json', label: 'JSON' },
|
||||
];
|
||||
|
||||
function NotesTool() {
|
||||
const [notes, setNotes] = useState([]);
|
||||
const [selected, setSelected] = useState(null);
|
||||
const [title, setTitle] = useState('Neue Notiz');
|
||||
const [content, setContent] = useState('');
|
||||
const [language, setLanguage] = useState('text');
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const debounceRef = useRef(null);
|
||||
const isNew = selected === null;
|
||||
|
||||
const loadNotes = useCallback(async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/notes');
|
||||
setNotes(res.data);
|
||||
} catch {
|
||||
setError('Fehler beim Laden der Notizen');
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { loadNotes(); }, [loadNotes]);
|
||||
|
||||
const selectNote = (note) => {
|
||||
setSelected(note.id);
|
||||
setTitle(note.title);
|
||||
setContent(note.content || '');
|
||||
setLanguage(note.language || 'text');
|
||||
setSaved(false);
|
||||
setConfirmDelete(false);
|
||||
setError('');
|
||||
};
|
||||
|
||||
const newNote = () => {
|
||||
setSelected(null);
|
||||
setTitle('Neue Notiz');
|
||||
setContent('');
|
||||
setLanguage('text');
|
||||
setSaved(false);
|
||||
setConfirmDelete(false);
|
||||
setError('');
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
setError('');
|
||||
try {
|
||||
if (isNew) {
|
||||
const res = await axios.post('/api/notes', { title, content, language });
|
||||
setSelected(res.data.id);
|
||||
await loadNotes();
|
||||
} else {
|
||||
await axios.put(`/api/notes/${selected}`, { title, content, language });
|
||||
await loadNotes();
|
||||
}
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Fehler beim Speichern');
|
||||
}
|
||||
};
|
||||
|
||||
const deleteNote = async () => {
|
||||
if (!confirmDelete) { setConfirmDelete(true); return; }
|
||||
try {
|
||||
await axios.delete(`/api/notes/${selected}`);
|
||||
setNotes(prev => prev.filter(n => n.id !== selected));
|
||||
newNote();
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Fehler beim Löschen');
|
||||
}
|
||||
};
|
||||
|
||||
// Debounced auto-save for existing notes
|
||||
useEffect(() => {
|
||||
if (isNew) return;
|
||||
clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(async () => {
|
||||
try {
|
||||
await axios.put(`/api/notes/${selected}`, { title, content, language });
|
||||
await loadNotes();
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 1500);
|
||||
} catch { /* silent */ }
|
||||
}, 1000);
|
||||
return () => clearTimeout(debounceRef.current);
|
||||
}, [title, content, language]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '';
|
||||
return new Date(iso).toLocaleString('de-DE', {
|
||||
day: '2-digit', month: '2-digit', year: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content" style={{ maxWidth: '1100px' }}>
|
||||
<h2>Notizen & Snippets</h2>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: '16px', alignItems: 'start' }}>
|
||||
{/* Sidebar */}
|
||||
<div style={{
|
||||
background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{ padding: '10px', borderBottom: '1px solid var(--border)' }}>
|
||||
<button onClick={newNote} style={{ width: '100%', margin: 0, padding: '8px', fontSize: '0.85rem' }}>
|
||||
+ Neue Notiz
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ maxHeight: '500px', overflowY: 'auto' }}>
|
||||
{notes.length === 0 ? (
|
||||
<p style={{ color: 'var(--muted)', padding: '16px', fontSize: '0.85rem', textAlign: 'center' }}>
|
||||
Keine Notizen vorhanden
|
||||
</p>
|
||||
) : notes.map((note) => (
|
||||
<div
|
||||
key={note.id}
|
||||
onClick={() => selectNote(note)}
|
||||
style={{
|
||||
padding: '10px 14px',
|
||||
cursor: 'pointer',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
background: selected === note.id ? 'rgba(34,211,238,0.08)' : 'transparent',
|
||||
borderLeft: selected === note.id ? '3px solid var(--accent)' : '3px solid transparent',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
fontWeight: 600, color: 'var(--text)', fontSize: '0.9rem',
|
||||
marginBottom: '2px', overflow: 'hidden',
|
||||
textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{note.title}
|
||||
</div>
|
||||
<div style={{ fontSize: '0.75rem', color: 'var(--muted)' }}>
|
||||
{formatDate(note.updated_at)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editor */}
|
||||
<div style={{
|
||||
background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', gap: '8px', marginBottom: '10px', flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => { setTitle(e.target.value); setSaved(false); }}
|
||||
placeholder="Titel"
|
||||
style={{ flex: 1, margin: 0, minWidth: '150px' }}
|
||||
/>
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => { setLanguage(e.target.value); setSaved(false); }}
|
||||
style={{ margin: 0, width: 'auto' }}
|
||||
>
|
||||
{LANGUAGES.map(({ value, label }) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
rows={16}
|
||||
value={content}
|
||||
onChange={(e) => { setContent(e.target.value); setSaved(false); }}
|
||||
placeholder="Inhalt..."
|
||||
style={{ fontFamily: 'monospace', resize: 'vertical', fontSize: '0.88rem', margin: 0 }}
|
||||
/>
|
||||
|
||||
{error && <p className="error" style={{ marginTop: '8px', marginBottom: 0 }}>{error}</p>}
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', marginTop: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<button onClick={save} style={{ margin: 0 }}>
|
||||
{isNew ? 'Erstellen' : 'Speichern'}
|
||||
</button>
|
||||
{!isNew && (
|
||||
<button
|
||||
className="ghost"
|
||||
onClick={deleteNote}
|
||||
style={{
|
||||
margin: 0,
|
||||
color: confirmDelete ? '#ef4444' : 'var(--text)',
|
||||
borderColor: confirmDelete ? '#ef4444' : 'var(--border)',
|
||||
}}
|
||||
>
|
||||
{confirmDelete ? 'Wirklich löschen?' : 'Löschen'}
|
||||
</button>
|
||||
)}
|
||||
{confirmDelete && (
|
||||
<button className="ghost" onClick={() => setConfirmDelete(false)} style={{ margin: 0 }}>
|
||||
Abbrechen
|
||||
</button>
|
||||
)}
|
||||
{saved && (
|
||||
<span style={{ color: '#22c55e', fontSize: '0.85rem', fontWeight: 600 }}>✓ Gespeichert</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NotesTool;
|
||||
@@ -0,0 +1,151 @@
|
||||
import { useState } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
const resultBox = {
|
||||
marginTop: '12px',
|
||||
padding: '12px 14px',
|
||||
background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: '10px',
|
||||
justifyContent: 'space-between',
|
||||
};
|
||||
|
||||
const statCard = {
|
||||
padding: '12px 16px',
|
||||
background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '12px',
|
||||
textAlign: 'center',
|
||||
flex: '1 1 120px',
|
||||
};
|
||||
|
||||
const TRANSFORMS = [
|
||||
{ op: 'uppercase', label: 'Großbuchstaben' },
|
||||
{ op: 'lowercase', label: 'Kleinbuchstaben' },
|
||||
{ op: 'titlecase', label: 'Titelschreibung' },
|
||||
{ op: 'reverse', label: 'Umkehren' },
|
||||
{ op: 'trim', label: 'Leerzeichen trim' },
|
||||
{ op: 'remove_spaces', label: 'Leerzeichen entfernen' },
|
||||
];
|
||||
|
||||
function StringUtilsTool() {
|
||||
const [input, setInput] = useState('');
|
||||
const [result, setResult] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const run = async (op) => {
|
||||
setError('');
|
||||
setResult(null);
|
||||
if (!input) {
|
||||
setError('Bitte Text eingeben.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await axios.post('/api/string/analyze', { text: input, operation: op });
|
||||
setResult(res.data);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Fehler bei der Verarbeitung');
|
||||
}
|
||||
};
|
||||
|
||||
const copy = (text) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h2>String Utilities</h2>
|
||||
|
||||
<textarea
|
||||
rows={6}
|
||||
value={input}
|
||||
onChange={(e) => { setInput(e.target.value); setResult(null); setError(''); }}
|
||||
placeholder="Text eingeben..."
|
||||
style={{ resize: 'vertical' }}
|
||||
/>
|
||||
|
||||
<div style={{ marginTop: '12px' }}>
|
||||
<p style={{ color: 'var(--muted)', fontWeight: 600, marginBottom: '8px', fontSize: '0.9rem' }}>Analyse</p>
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
<button onClick={() => run('stats')}>Statistiken</button>
|
||||
<button onClick={() => run('count_words')}>Worthäufigkeit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '12px' }}>
|
||||
<p style={{ color: 'var(--muted)', fontWeight: 600, marginBottom: '8px', fontSize: '0.9rem' }}>Transformation</p>
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
{TRANSFORMS.map(({ op, label }) => (
|
||||
<button key={op} className="ghost" onClick={() => run(op)}>{label}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}
|
||||
|
||||
{result && result.operation === 'stats' && (
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<p style={{ color: 'var(--muted)', fontWeight: 600, marginBottom: '10px', fontSize: '0.9rem' }}>Statistiken</p>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
{[
|
||||
{ label: 'Zeichen', value: result.chars },
|
||||
{ label: 'Ohne Leerzeichen', value: result.chars_no_spaces },
|
||||
{ label: 'Wörter', value: result.words },
|
||||
{ label: 'Zeilen', value: result.lines },
|
||||
{ label: 'Leerzeichen', value: result.spaces },
|
||||
].map(({ label, value }) => (
|
||||
<div key={label} style={statCard}>
|
||||
<div style={{ fontSize: '1.5rem', fontWeight: 700, color: 'var(--accent)' }}>{value}</div>
|
||||
<div style={{ fontSize: '0.8rem', color: 'var(--muted)', marginTop: '4px' }}>{label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && result.operation === 'count_words' && (
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<p style={{ color: 'var(--muted)', fontWeight: 600, marginBottom: '10px', fontSize: '0.9rem' }}>Top-Wörter</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||
{result.words.map(({ word, count }, i) => (
|
||||
<div key={word} style={{
|
||||
display: 'flex', alignItems: 'center', gap: '10px',
|
||||
padding: '8px 12px',
|
||||
background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '10px',
|
||||
}}>
|
||||
<span style={{ color: 'var(--muted)', width: '20px', fontSize: '0.85rem' }}>#{i + 1}</span>
|
||||
<span style={{ fontFamily: 'monospace', color: 'var(--text)', flex: 1 }}>{word}</span>
|
||||
<span style={{
|
||||
background: 'var(--accent)', color: '#0b1224',
|
||||
borderRadius: '20px', padding: '2px 10px',
|
||||
fontSize: '0.8rem', fontWeight: 700,
|
||||
}}>{count}×</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && result.result !== undefined && (
|
||||
<div style={resultBox}>
|
||||
<span style={{ wordBreak: 'break-all', color: 'var(--text)', fontFamily: 'monospace', fontSize: '0.9rem', flex: 1, whiteSpace: 'pre-wrap' }}>
|
||||
{result.result}
|
||||
</span>
|
||||
<button className="ghost" onClick={() => copy(result.result)} style={{ flexShrink: 0, margin: 0 }}>
|
||||
{copied ? 'Kopiert!' : 'Kopieren'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default StringUtilsTool;
|
||||
@@ -14,7 +14,15 @@ const TOOLS = [
|
||||
{ icon: '📄', path: '/tools/markdown', title: 'Markdown Editor', desc: 'Markdown live rendern und vorschauen' },
|
||||
{ icon: '🎨', path: '/tools/color', title: 'Farb-Konverter', desc: 'HEX, RGB und HSL konvertieren' },
|
||||
{ icon: '{ }', path: '/tools/json', title: 'JSON Formatter', desc: 'JSON formatieren und validieren' },
|
||||
{ icon: '🔍', path: '/tools/regex', title: 'Regex Tester', desc: 'Reguläre Ausdrücke live testen' },
|
||||
{ icon: '🔍', path: '/tools/regex', title: 'Regex Tester', desc: 'Reguläre Ausdrücke live testen' },
|
||||
{ icon: '✅', path: '/tools/hashverify', title: 'Hash Verifier', desc: 'Prüfen ob Text und Hash übereinstimmen' },
|
||||
{ icon: '🔗', path: '/tools/url', title: 'URL Encoder/Decoder', desc: 'URLs kodieren und dekodieren' },
|
||||
{ icon: '✏️', path: '/tools/string', title: 'String Utilities', desc: 'Text analysieren und transformieren' },
|
||||
{ icon: '⏰', path: '/tools/cron', title: 'Cron Erklärer', desc: 'Cron-Ausdrücke auf Deutsch erklären' },
|
||||
{ icon: '🌐', path: '/tools/ipcalc', title: 'IP / Subnetz Rechner', desc: 'CIDR Netzwerke berechnen' },
|
||||
{ icon: '📃', path: '/tools/lorem', title: 'Lorem Ipsum Generator', desc: 'Blindtext generieren' },
|
||||
{ icon: '📊', path: '/tools/csv', title: 'CSV Viewer', desc: 'CSV-Daten als Tabelle anzeigen' },
|
||||
{ icon: '🗒️', path: '/tools/notes', title: 'Notizen & Snippets', desc: 'Code und Texte speichern' },
|
||||
];
|
||||
|
||||
function ToolOverview() {
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useState } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
const resultBox = {
|
||||
marginTop: '12px',
|
||||
padding: '12px 14px',
|
||||
background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: '10px',
|
||||
justifyContent: 'space-between',
|
||||
};
|
||||
|
||||
function UrlTool() {
|
||||
const [input, setInput] = useState('');
|
||||
const [result, setResult] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const request = async (action) => {
|
||||
setError('');
|
||||
setResult('');
|
||||
if (!input) {
|
||||
setError('Bitte Text eingeben.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await axios.post(`/api/url/${action}`, { text: input });
|
||||
setResult(res.data.result);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || `Fehler beim ${action === 'encode' ? 'Encoding' : 'Decoding'}`);
|
||||
}
|
||||
};
|
||||
|
||||
const copy = () => {
|
||||
navigator.clipboard.writeText(result);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<h2>URL Encoder / Decoder</h2>
|
||||
<p style={{ color: 'var(--muted)', marginBottom: '16px', fontSize: '0.95rem' }}>
|
||||
URLs und Strings kodieren oder dekodieren.
|
||||
</p>
|
||||
|
||||
<textarea
|
||||
rows={4}
|
||||
value={input}
|
||||
onChange={(e) => { setInput(e.target.value); setResult(''); setError(''); }}
|
||||
placeholder="Text oder URL eingeben..."
|
||||
style={{ fontFamily: 'monospace', resize: 'vertical' }}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
|
||||
<button onClick={() => request('encode')}>Encode</button>
|
||||
<button className="ghost" onClick={() => request('decode')}>Decode</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="error" style={{ marginTop: '12px' }}>{error}</p>}
|
||||
|
||||
{result && (
|
||||
<div style={resultBox}>
|
||||
<span style={{ wordBreak: 'break-all', color: 'var(--text)', fontFamily: 'monospace', fontSize: '0.9rem', flex: 1 }}>
|
||||
{result}
|
||||
</span>
|
||||
<button className="ghost" onClick={copy} style={{ flexShrink: 0, margin: 0 }}>
|
||||
{copied ? 'Kopiert!' : 'Kopieren'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UrlTool;
|
||||
Reference in New Issue
Block a user