JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

[⚠️ Suspicious Content] <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BBM Einstellparameter - Digital Form</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-content">
                <div class="logo-section">
                    <!-- Replaced placeholder image with inline SVG logo -->
                    <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="70" height="70" rx="6" fill="#004080"/>
                        <text x="50%" y="50%" font-family="Open Sans, sans-serif" font-size="32" font-weight="700" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle">BBM</text>
                    </svg>
                </div>
                <div class="company-info">
                    <h1>BBM Maschinenbau</h1>
                    <div class="company-details">
                        <strong>BBM Maschinenbau und Vertriebs GmbH</strong><br>
                        Dieselstraße 4, 33449 Langenberg<br>
                        Tel: +49 (0) 52 48 82 38 – 0 | Fax: +49 (0) 52 48 82 38 – 295
                    </div>
                </div>
                <div class="form-controls">
                    <div class="form-group">
                        <label for="globalEmployee">Employee:</label>
                        <input type="text" id="globalEmployee" placeholder="Enter employee name"...

CSS

/* Industrial Design Color Palette & Variables */
:root {
    --primary-color: #004080; /* Darker, more professional blue */
    --secondary-color: #4A5568; /* Slate Gray */
    --tertiary-color: #E2E8F0; /* Light Gray for backgrounds */
    --success-color: #28A745;
    --danger-color: #DC3545;
    --info-color: #17A2B8;
    --background-light: #F7FAFC; /* Lighter background */
    --background-card: #FFFFFF;
    --background-section: #EDF2F7; /* Subtle light gray for sections */
    --border-color: #CBD5E0; /* Lighter border */
    --text-color-dark: #2D3748; /* Darker text for contrast */
    --header-text-color: #FFFFFF;
    --font-family: 'Open Sans', 'Roboto', 'Arial', sans-serif; /* Prioritize Open Sans for readability */
    --border-radius: 6px; /* Slightly less rounded for a crisper look */
    --box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Softer, subtle shadow */
    --inset-shadow: inset 0 1px 2px rgba(0,0,0,0.08); /* Smaller inset shadow for inputs */
    --transition-speed: 0.2s ease-in-out;
    --focus-glow: 0 0 0 2px rgba(0, 64, 128, 0.15); /* Softer, smaller focus glow */
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--background-light);
    margin: 0;
    padding: 10px; /* Reduced body padding */
    min-height: 100vh;
    color: var(--text-color-dark);
    line-height: 1.5; /* Slightly tighter line height */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--background-card);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.header {
    background: var(--primary-color);
    color: var(--header-text-color);
    padding: 12px 20px; /* Reduced header padding */
    border-bottom: 2px solid rgba(0,0,0,0.1); /* Thinner border */
}

.header-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px; /* Reduced gap */
    align-items:...

JavaScript

[⚠️ Suspicious Content] let entries = [];
let currentEntryIndex = 0;
const LOCAL_STORAGE_KEY = 'bbmEinstellparameterData';
const GLOBAL_DATA_KEY = 'bbmGlobalData'; // New key for global data
const COLLAPSE_STATE_KEY_PREFIX = 'bbmCollapseState_'; // New key for collapse states
let confirmCallback = null; // Store the callback for the custom confirmation modal

// --- Initialization ---
document.addEventListener('DOMContentLoaded', function() {
    initializeForm();
});

function initializeForm() {
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('globalDate').value = today;
    loadGlobalData(); // Load global data first
    loadFromStorage();
    if (entries.length === 0) {
        addEntry(); // Ensure at least one entry exists
    } else {
        renderAllEntriesAndTabs();
        // Ensure currentEntryIndex is valid after loading from storage
        if (currentEntryIndex >= entries.length) {
            currentEntryIndex = entries.length - 1;
        }
        if (currentEntryIndex < 0) { // If no entries somehow
            currentEntryIndex = 0;
            addEntry(); // Add a new entry if none exist after load
        }
        switchToEntry(currentEntryIndex); // Switch to the last active entry or the first one
    }
    updateRemoveButtonState();
}

// --- Global Data Handling ---
function updateGlobalData() {
    const globalData = {
        employee: document.getElementById('globalEmployee').value,
        date: document.getElementById('globalDate').value
    };
    localStorage.setItem(GLOBAL_DATA_KEY, JSON.stringify(globalData));
}

function loadGlobalData() {
    const storedGlobalData = localStorage.getItem(GLOBAL_DATA_KEY);
    if (storedGlobalData) {
        try {
            const parsedGlobalData = JSON.parse(storedGlobalData);
            document.getElementById('globalEmployee').value = parsedGlobalData.employee || '';
           ...