411 lines
13 KiB
PHP
411 lines
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sentinel - Schadenserkennung</title>
|
|
<style>
|
|
/* Google Font: Inter */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
/* Modern German-inspired Palette */
|
|
:root {
|
|
--background-main: #f8f9fa; /* Off-white */
|
|
--background-card: #ffffff;
|
|
--text-primary: #212529; /* Near-black for high contrast */
|
|
--text-secondary: #6c757d; /* Muted grey for subtitles */
|
|
--accent-blue: #007bff; /* A strong, clear blue */
|
|
--accent-blue-darker: #0056b3;
|
|
--border-color: #dee2e6;
|
|
--border-dashed: #ced4da;
|
|
--error-red: #dc3545;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
margin: 0;
|
|
background-color: var(--background-main);
|
|
color: var(--text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
header {
|
|
background-color: var(--background-card);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1.5rem 0;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
header .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
header h1 {
|
|
margin: 0;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
header h1 span {
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
main .grid-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
main .grid-container {
|
|
grid-template-columns: 400px 1fr;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--background-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.5rem;
|
|
padding: 2rem;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
p.subtitle {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* File Upload */
|
|
.file-input-wrapper {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
border: 2px dashed var(--border-dashed);
|
|
border-radius: 0.5rem;
|
|
padding: 2rem;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
background-color: var(--background-main);
|
|
transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.file-input-wrapper:hover {
|
|
border-color: var(--accent-blue);
|
|
}
|
|
|
|
.file-input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.file-input-label-icon {
|
|
color: var(--accent-blue);
|
|
margin-bottom: 1rem;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.file-input-wrapper:hover .file-input-label-icon {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.file-input-label span {
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-input-label span.highlight {
|
|
color: var(--accent-blue);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#file-name {
|
|
margin-top: 1rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
.upload-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 0.875rem;
|
|
margin-top: 1.5rem;
|
|
background-color: var(--accent-blue);
|
|
color: var(--background-card);
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease-in-out;
|
|
text-align: center;
|
|
}
|
|
|
|
.upload-button:hover:not(:disabled) {
|
|
background-color: var(--accent-blue-darker);
|
|
}
|
|
|
|
.upload-button:disabled {
|
|
background-color: #a1c9ff;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.spinner {
|
|
display: none;
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: #fff;
|
|
animation: spin 1s ease-in-out infinite;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Results Table */
|
|
.results-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
th, td {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
thead th {
|
|
background-color: var(--background-main);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
tbody tr:last-child th,
|
|
tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background-color: #f1f3f5;
|
|
}
|
|
|
|
.placeholder {
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
padding: 3rem 1rem;
|
|
}
|
|
|
|
.placeholder.error {
|
|
color: var(--error-red);
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 3rem 0;
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<h1>Sentinel<span>.</span></h1>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<div class="grid-container">
|
|
<div class="upload-card card">
|
|
<h2>Fahrzeugbild hochladen</h2>
|
|
<p class="subtitle">Foto zur Analyse von Schäden hochladen.</p>
|
|
<form id="upload-form" method="post" enctype="multipart/form-data">
|
|
<div class="file-input-wrapper">
|
|
<input type="file" name="vehicleImage" id="vehicleImage" class="file-input" accept="image/*" required>
|
|
<label for="vehicleImage" class="file-input-label">
|
|
<div class="file-input-label-icon">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M21.2 15c.7-1.2 1-2.5.7-3.9-.6-2.4-2.4-4.2-4.8-4.8-1.4-.3-2.7 0-3.9.7L4 4 3 3"/><path d="M19 19l-1.5-1.5"/><path d="M22 22l-2-2"/><path d="M7 12a5 5 0 0 1 5-5"/><path d="M12 17a5 5 0 0 1-5-5"/></svg>
|
|
</div>
|
|
<span class="file-input-label">
|
|
<span class="highlight">Datei auswählen</span> oder hierher ziehen
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div id="file-name"></div>
|
|
<button type="submit" id="upload-button" class="upload-button">
|
|
<span class="spinner"></span>
|
|
<span class="button-text">Bild analysieren</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="results-card card">
|
|
<h2>Analyseergebnisse</h2>
|
|
<p class="subtitle">Erkannte Schäden.</p>
|
|
<div class="results-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Erkannter Schaden</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="results-body">
|
|
<tr>
|
|
<td colspan="2" class="placeholder">Laden Sie ein Bild hoch, um die Analyse zu sehen.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 Sentinel. Alle Rechte vorbehalten.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const uploadForm = document.getElementById('upload-form');
|
|
const fileInput = document.getElementById('vehicleImage');
|
|
const fileNameDisplay = document.getElementById('file-name');
|
|
const uploadButton = document.getElementById('upload-button');
|
|
const buttonSpinner = uploadButton.querySelector('.spinner');
|
|
const buttonText = uploadButton.querySelector('.button-text');
|
|
const resultsBody = document.getElementById('results-body');
|
|
const placeholderText = 'Laden Sie ein Bild hoch, um die Analyse zu sehen.';
|
|
const errorPlaceholder = (message) => `Fehler: ${message}`;
|
|
|
|
fileInput.addEventListener('change', function() {
|
|
if (this.files.length > 0) {
|
|
fileNameDisplay.textContent = `Ausgewählt: ${this.files[0].name}`;
|
|
} else {
|
|
fileNameDisplay.textContent = '';
|
|
}
|
|
});
|
|
|
|
uploadForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
if (fileInput.files.length === 0) {
|
|
setTableError('Bitte wählen Sie eine Bilddatei aus.');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('vehicleImage', fileInput.files[0]);
|
|
|
|
setLoading(true);
|
|
setTableLoading();
|
|
|
|
try {
|
|
const response = await fetch('api/defects.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(result.error || 'Ein unbekannter Fehler ist aufgetreten.');
|
|
}
|
|
|
|
if (result.defects && result.defects.length > 0) {
|
|
populateTable(result.defects);
|
|
} else {
|
|
setTableEmpty();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error during analysis:', error);
|
|
setTableError(error.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
});
|
|
|
|
function setLoading(isLoading) {
|
|
uploadButton.disabled = isLoading;
|
|
if (isLoading) {
|
|
buttonSpinner.style.display = 'block';
|
|
buttonText.textContent = 'Analysiere...';
|
|
} else {
|
|
buttonSpinner.style.display = 'none';
|
|
buttonText.textContent = 'Bild analysieren';
|
|
}
|
|
}
|
|
|
|
function setTableLoading() {
|
|
resultsBody.innerHTML = `<tr><td colspan="2" class="placeholder">Analysiere Bild...</td></tr>`;
|
|
}
|
|
|
|
function setTableError(message) {
|
|
resultsBody.innerHTML = `<tr><td colspan="2" class="placeholder error">${errorPlaceholder(message)}</td></tr>`;
|
|
}
|
|
|
|
function setTableEmpty() {
|
|
resultsBody.innerHTML = `<tr><td colspan="2" class="placeholder">Keine Schäden im Bild erkannt.</td></tr>`;
|
|
}
|
|
|
|
function populateTable(defects) {
|
|
resultsBody.innerHTML = ''; // Clear existing rows
|
|
defects.forEach((defect, index) => {
|
|
const row = document.createElement('tr');
|
|
|
|
const cellIndex = document.createElement('td');
|
|
cellIndex.textContent = index + 1;
|
|
|
|
const cellDefect = document.createElement('td');
|
|
cellDefect.textContent = defect;
|
|
|
|
row.appendChild(cellIndex);
|
|
row.appendChild(cellDefect);
|
|
|
|
resultsBody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |