Erstes Mockup Bild hochgeladen
Erstes HTML mockup über ein mögliches Interface Design + html datei
This commit is contained in:
parent
4fe185c660
commit
179fa8c5df
BIN
Mockup/InterfaceMockup.png
Normal file
BIN
Mockup/InterfaceMockup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
480
Mockup/index.html
Normal file
480
Mockup/index.html
Normal file
@ -0,0 +1,480 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Active Directory Datenverwaltung</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-white: rgba(255, 255, 255, 1);
|
||||
--color-black: rgba(0, 0, 0, 1);
|
||||
--color-cream-50: rgba(252, 252, 249, 1);
|
||||
--color-cream-100: rgba(255, 255, 253, 1);
|
||||
--color-gray-200: rgba(245, 245, 245, 1);
|
||||
--color-gray-300: rgba(167, 169, 169, 1);
|
||||
--color-slate-500: rgba(98, 108, 113, 1);
|
||||
--color-brown-600: rgba(94, 82, 64, 1);
|
||||
--color-charcoal-700: rgba(31, 33, 33, 1);
|
||||
--color-charcoal-800: rgba(38, 40, 40, 1);
|
||||
--color-slate-900: rgba(19, 52, 59, 1);
|
||||
--color-teal-500: rgba(33, 128, 141, 1);
|
||||
--color-teal-600: rgba(29, 116, 128, 1);
|
||||
--color-teal-700: rgba(26, 104, 115, 1);
|
||||
--color-teal-300: rgba(50, 184, 198, 1);
|
||||
--color-teal-400: rgba(45, 166, 178, 1);
|
||||
--color-brown-600-rgb: 94, 82, 64;
|
||||
--color-teal-500-rgb: 33, 128, 141;
|
||||
--color-background: var(--color-cream-50);
|
||||
--color-surface: var(--color-cream-100);
|
||||
--color-text: var(--color-slate-900);
|
||||
--color-text-secondary: var(--color-slate-500);
|
||||
--color-primary: var(--color-teal-500);
|
||||
--color-primary-hover: var(--color-teal-600);
|
||||
--color-primary-active: var(--color-teal-700);
|
||||
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
|
||||
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
|
||||
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
|
||||
--color-btn-primary-text: var(--color-cream-50);
|
||||
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
|
||||
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-size-sm: 12px;
|
||||
--font-size-base: 14px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 18px;
|
||||
--font-size-2xl: 20px;
|
||||
--font-size-3xl: 24px;
|
||||
--space-4: 4px;
|
||||
--space-6: 6px;
|
||||
--space-8: 8px;
|
||||
--space-12: 12px;
|
||||
--space-16: 16px;
|
||||
--space-20: 20px;
|
||||
--space-24: 24px;
|
||||
--space-32: 32px;
|
||||
--radius-base: 8px;
|
||||
--radius-lg: 12px;
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
||||
--duration-fast: 150ms;
|
||||
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-gray-400-rgb: 119, 124, 124;
|
||||
--color-teal-300-rgb: 50, 184, 198;
|
||||
--color-gray-300-rgb: 167, 169, 169;
|
||||
--color-gray-200-rgb: 245, 245, 245;
|
||||
--color-background: var(--color-charcoal-700);
|
||||
--color-surface: var(--color-charcoal-800);
|
||||
--color-text: var(--color-gray-200);
|
||||
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
|
||||
--color-primary: var(--color-teal-300);
|
||||
--color-primary-hover: var(--color-teal-400);
|
||||
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
|
||||
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
|
||||
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
|
||||
--color-btn-primary-text: var(--color-slate-900);
|
||||
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
padding: var(--space-20);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background-color: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--space-32);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-3xl);
|
||||
margin-bottom: var(--space-24);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--space-16);
|
||||
margin-top: var(--space-24);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-12);
|
||||
margin-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
select {
|
||||
padding: var(--space-8) var(--space-12);
|
||||
font-size: var(--font-size-base);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-base);
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
transition: border-color var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-focus-ring);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--space-8) var(--space-16);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: var(--radius-base);
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-btn-primary-text);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-secondary-hover);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: var(--space-4) var(--space-12);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 2px solid var(--color-border);
|
||||
margin: var(--space-32) 0;
|
||||
}
|
||||
|
||||
.dynamic-fields {
|
||||
margin-top: var(--space-16);
|
||||
}
|
||||
|
||||
.dynamic-field-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr auto;
|
||||
gap: var(--space-12);
|
||||
margin-bottom: var(--space-12);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.csv-section {
|
||||
margin-top: var(--space-24);
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: var(--space-8);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-base);
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: var(--space-12);
|
||||
margin-top: var(--space-16);
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background-color: rgba(192, 21, 47, 0.1);
|
||||
color: #c0152f;
|
||||
padding: var(--space-8) var(--space-12);
|
||||
}
|
||||
|
||||
.btn-remove:hover {
|
||||
background-color: rgba(192, 21, 47, 0.2);
|
||||
}
|
||||
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
padding: var(--space-8) var(--space-12);
|
||||
border: 1px solid var(--color-border);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
background-color: var(--color-secondary);
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
padding: var(--space-4) var(--space-8);
|
||||
font-size: var(--font-size-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-base);
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Active Directory Datenverwaltung</h1>
|
||||
|
||||
<form id="adForm">
|
||||
<h2>Benutzer manuell anlegen</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="firstname">Vorname</label>
|
||||
<input type="text" id="firstname" name="firstname" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Passwort</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="lastname">Nachname</label>
|
||||
<input type="text" id="lastname" name="lastname" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="group">Gruppe</label>
|
||||
<select id="group" name="group" required>
|
||||
<option value="">-- Gruppe wählen --</option>
|
||||
<option value="Admins">Admins</option>
|
||||
<option value="Benutzer">Benutzer</option>
|
||||
<option value="IT">IT</option>
|
||||
<option value="Buchhaltung">Buchhaltung</option>
|
||||
<option value="Vertrieb">Vertrieb</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dynamic-fields">
|
||||
<h2>Zusätzliche Felder</h2>
|
||||
<div id="customFields"></div>
|
||||
<button type="button" class="btn btn-secondary btn-small" onclick="addCustomField()">+ Feld hinzufügen</button>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button type="submit" class="btn btn-primary">Benutzer erstellen</button>
|
||||
<button type="reset" class="btn btn-secondary">Zurücksetzen</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr class="divider">
|
||||
|
||||
<div class="csv-section">
|
||||
<h2>CSV-Datei importieren</h2>
|
||||
<form id="csvForm">
|
||||
<div class="form-group">
|
||||
<label for="csvFile">CSV-Datei auswählen</label>
|
||||
<input type="file" id="csvFile" name="csvFile" accept=".csv" required>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" onclick="loadCSVPreview()">CSV laden</button>
|
||||
</form>
|
||||
|
||||
<div id="csvPreview" style="margin-top: var(--space-24);">
|
||||
<h2>CSV-Vorschau und Bearbeitung</h2>
|
||||
<div class="preview-info" style="margin-bottom: var(--space-16); padding: var(--space-12); background-color: var(--color-secondary); border-radius: var(--radius-base); font-size: var(--font-size-sm);">
|
||||
<strong>Hinweis:</strong> Sie können die Werte direkt in der Tabelle bearbeiten, bevor Sie importieren.
|
||||
</div>
|
||||
<div style="overflow-x: auto; margin-bottom: var(--space-16);">
|
||||
<table id="csvTable" style="width: 100%; border-collapse: collapse;">
|
||||
<thead id="csvTableHead"></thead>
|
||||
<tbody id="csvTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button type="button" class="btn btn-primary" onclick="importCSVData()">Endgültig importieren</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="cancelCSVPreview()">Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let customFieldCounter = 0;
|
||||
|
||||
function addCustomField() {
|
||||
customFieldCounter++;
|
||||
const container = document.getElementById('customFields');
|
||||
const fieldItem = document.createElement('div');
|
||||
fieldItem.className = 'dynamic-field-item';
|
||||
fieldItem.id = `customField_${customFieldCounter}`;
|
||||
|
||||
fieldItem.innerHTML = `
|
||||
<div class="form-group">
|
||||
<label for="fieldName_${customFieldCounter}">Feldname</label>
|
||||
<input type="text" id="fieldName_${customFieldCounter}" placeholder="z.B. Telefonnummer">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fieldValue_${customFieldCounter}">Wert</label>
|
||||
<input type="text" id="fieldValue_${customFieldCounter}" placeholder="Wert eingeben">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-remove btn-small" onclick="removeCustomField(${customFieldCounter})">Entfernen</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(fieldItem);
|
||||
}
|
||||
|
||||
function removeCustomField(id) {
|
||||
const field = document.getElementById(`customField_${id}`);
|
||||
if (field) {
|
||||
field.remove();
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('adForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = {
|
||||
firstname: document.getElementById('firstname').value,
|
||||
lastname: document.getElementById('lastname').value,
|
||||
group: document.getElementById('group').value,
|
||||
password: document.getElementById('password').value,
|
||||
customFields: {}
|
||||
};
|
||||
|
||||
const customFields = document.querySelectorAll('.dynamic-field-item');
|
||||
customFields.forEach((field) => {
|
||||
const nameInput = field.querySelector('[id^="fieldName_"]');
|
||||
const valueInput = field.querySelector('[id^="fieldValue_"]');
|
||||
if (nameInput && valueInput && nameInput.value) {
|
||||
formData.customFields[nameInput.value] = valueInput.value;
|
||||
}
|
||||
});
|
||||
|
||||
console.log('AD Benutzer Daten:', formData);
|
||||
alert('Benutzer wurde erfolgreich erstellt!\n\nDaten in der Konsole (F12) einsehen.');
|
||||
});
|
||||
|
||||
let csvData = [];
|
||||
|
||||
function loadCSVPreview() {
|
||||
const fileInput = document.getElementById('csvFile');
|
||||
const file = fileInput.files[0];
|
||||
|
||||
if (!file) {
|
||||
alert('Bitte wählen Sie eine CSV-Datei aus.');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const csvContent = event.target.result;
|
||||
parseCSV(csvContent);
|
||||
displayCSVPreview();
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function parseCSV(content) {
|
||||
const lines = content.split('\n').filter(line => line.trim());
|
||||
csvData = lines.map(line => {
|
||||
// Einfaches CSV-Parsing (für komplexere CSVs ggf. Bibliothek verwenden)
|
||||
return line.split(/[,;]/).map(cell => cell.trim().replace(/^"|"$/g, ''));
|
||||
});
|
||||
}
|
||||
|
||||
function displayCSVPreview() {
|
||||
if (csvData.length === 0) return;
|
||||
|
||||
const previewDiv = document.getElementById('csvPreview');
|
||||
const tableHead = document.getElementById('csvTableHead');
|
||||
const tableBody = document.getElementById('csvTableBody');
|
||||
|
||||
// Header erstellen
|
||||
const headers = csvData[0];
|
||||
tableHead.innerHTML = '<tr>' + headers.map(h => `<th>${h}</th>`).join('') + '</tr>';
|
||||
|
||||
// Datenzeilen erstellen (mit editierbaren Inputs)
|
||||
tableBody.innerHTML = '';
|
||||
for (let i = 1; i < csvData.length; i++) {
|
||||
const row = csvData[i];
|
||||
const tr = document.createElement('tr');
|
||||
row.forEach((cell, index) => {
|
||||
const td = document.createElement('td');
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.value = cell;
|
||||
input.dataset.row = i;
|
||||
input.dataset.col = index;
|
||||
input.addEventListener('input', (e) => {
|
||||
csvData[i][index] = e.target.value;
|
||||
});
|
||||
td.appendChild(input);
|
||||
tr.appendChild(td);
|
||||
});
|
||||
tableBody.appendChild(tr);
|
||||
}
|
||||
|
||||
previewDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
function importCSVData() {
|
||||
console.log('Importierte CSV-Daten:', csvData);
|
||||
alert(`${csvData.length - 1} Benutzer erfolgreich importiert!\n\nDaten in der Konsole (F12) einsehen.`);
|
||||
cancelCSVPreview();
|
||||
}
|
||||
|
||||
function cancelCSVPreview() {
|
||||
document.getElementById('csvPreview').style.display = 'none';
|
||||
document.getElementById('csvFile').value = '';
|
||||
csvData = [];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user