first release of comapny-data app

2026-03-31 22:07:11 +02:00
parent c033456bf8
commit 2f34b9b8be
12 changed files with 1434 additions and 10 deletions
@@ -0,0 +1,59 @@
+async function searchCompany() {
+    const country = document.getElementById("country").value;
+    const vatNumber = document.getElementById("vat_number").value.trim();
+    const status = document.getElementById("status");
+
+    if (!country || !vatNumber) {
+        status.textContent = "Please enter a country and VAT number.";
+        return;
+    }
+
+    status.textContent = "Searching...";
+
+    try {
+        const response = await fetch(
+            `/api/company_lookup?country=${encodeURIComponent(country)}&vat_number=${encodeURIComponent(vatNumber)}`
+        );
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            status.textContent = data.error || "Lookup failed.";
+            return;
+        }
+
+        document.getElementById("company_name").value = data.name || "";
+        document.getElementById("street").value = data.street || "";
+        document.getElementById("zip").value = data.zip || "";
+        document.getElementById("city").value = data.city || "";
+
+        let message = data.found ? `Found via ${data.source}.` : "No company found.";
+
+        if (data.warning) {
+            message += `\nWarning: ${data.warning}`;
+        }
+
+        if (data.fallback_error) {
+            message += `\nFallback error: ${data.fallback_error}`;
+        }
+
+        status.textContent = message;
+    } catch (error) {
+        status.textContent = "Request failed: " + error;
+    }
+}
+
+function saveData() {
+    const payload = {
+        country: document.getElementById("country").value,
+        vat_number: document.getElementById("vat_number").value.trim(),
+        company_name: document.getElementById("company_name").value.trim(),
+        street: document.getElementById("street").value.trim(),
+        zip: document.getElementById("zip").value.trim(),
+        city: document.getElementById("city").value.trim(),
+        email: document.getElementById("email").value.trim(),
+        phone: document.getElementById("phone").value.trim()
+    };
+
+    alert(JSON.stringify(payload, null, 2));
+}
@@ -0,0 +1,171 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+:root {
+    --bg1: #eef6ff;
+    --bg2: #dcecff;
+    --panel: rgba(255, 255, 255, 0.9);
+    --blue: #1f5fae;
+    --blue-dark: #123d73;
+    --blue-soft: #6fa6e8;
+    --line: #4d8fdb;
+    --text: #1a2f4d;
+    --muted: #4f6f92;
+    --shadow: 0 18px 50px rgba(20, 71, 132, 0.16);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    font-family: 'Inter', sans-serif;
+    font-size: 24px;
+    color: var(--text);
+    background:
+        radial-gradient(circle at top left, #f7fbff 0%, transparent 32%),
+        linear-gradient(135deg, var(--bg1), var(--bg2));
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 48px 24px;
+}
+
+.container {
+    width: 100%;
+    max-width: 1100px;
+    background: var(--panel);
+    backdrop-filter: blur(8px);
+    border-radius: 28px;
+    box-shadow: var(--shadow);
+    padding: 40px 48px;
+}
+
+h1 {
+    margin: 0 0 36px 0;
+    color: var(--blue-dark);
+    font-size: 34px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+
+.form-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+}
+
+.row {
+    display: grid;
+    grid-template-columns: 220px 1fr 1fr auto;
+    gap: 20px;
+    align-items: end;
+}
+
+label {
+    font-weight: 600;
+    color: var(--blue);
+    padding-bottom: 8px;
+}
+
+input,
+select {
+    width: 100%;
+    font-family: inherit;
+    font-size: 24px;
+    color: var(--text);
+    padding: 10px 4px;
+    border: none;
+    border-bottom: 2px solid var(--blue-soft);
+    background: transparent;
+    outline: none;
+    transition: border-color 0.2s ease;
+    border-radius: 0;
+}
+
+input:focus,
+select:focus {
+    border-bottom-color: var(--blue);
+    box-shadow: none;
+}
+
+input::placeholder {
+    color: #7f9fc4;
+}
+
+button {
+    font-family: inherit;
+    font-size: 24px;
+    font-weight: 700;
+    padding: 14px 24px;
+    border: none;
+    border-radius: 16px;
+    cursor: pointer;
+    background: linear-gradient(135deg, #3b82d6, #1f5fae);
+    color: white;
+    box-shadow: 0 10px 24px rgba(31, 95, 174, 0.24);
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
+    white-space: nowrap;
+}
+
+button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 14px 28px rgba(31, 95, 174, 0.28);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+.button-row {
+    margin-top: 36px;
+}
+
+.status {
+    margin-top: 28px;
+    padding: 20px 24px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(204, 227, 255, 0.7), rgba(232, 243, 255, 0.95));
+    color: var(--muted);
+    white-space: pre-wrap;
+    font-size: 22px;
+    border: 1px solid rgba(77, 143, 219, 0.18);
+}
+
+.span-3 {
+    grid-column: span 3;
+}
+
+@media (max-width: 900px) {
+    body {
+        padding: 20px;
+    }
+
+    .container {
+        padding: 28px 24px;
+    }
+
+    .row {
+        grid-template-columns: 1fr;
+        gap: 14px;
+    }
+
+    h1 {
+        font-size: 30px;
+    }
+
+    input,
+    select,
+    button {
+        font-size: 20px;
+    }
+
+    .status {
+        font-size: 18px;
+    }
+
+    .span-3 {
+        grid-column: span 1;
+    }
+}