console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Expense Reimbursement Request</title>
    <style>
        /* --- Basic Setup & Typography --- */
        :root {
            --primary-color: #005a9c;
            --secondary-color: #f4f7f6;
            --border-color: #d1d9e0;
            --text-color: #333;
            --success-color: #28a745;
            --success-bg: #e9f5ea;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--secondary-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* --- Main Container --- */
        .container {
            background-color: #ffffff;
            padding: 25px 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            width: 100%;
            max-width: 600px;
        }

        h1 {
            text-align: center;
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 25px;
            font-size: 1.5rem;
        }
        
        /* --- Form Elements --- */
        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        input[type="text"],
        input[type="date"],
        input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            box-sizing: border-box; /* Important for 100% width */
            font-size: 1rem;
            transition: border-color 0.2s;
        }

        input[type="number"] {
             text-align: right;
        }

        input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        fieldset {
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 15px;
            margin-top: 20px;
        }

        legend {
            font-weight: 600;
            color: var(--primary-color);
            padding: 0 10px;
        }

        /* --- Layout for Dates --- */
        .date-group {
            display: flex;
            gap: 15px;
        }
        .date-group .form-group {
            flex: 1;
        }

        /* --- Total & Status Display --- */
        .total-display {
            margin-top: 20px;
            padding: 15px;
            background-color: var(--secondary-color);
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
        }

        #totalAmount {
            color: var(--primary-color);
        }
        
        #submissionStatus {
            text-align: center;
            margin-top: 20px;
            padding: 12px;
            border-radius: 4px;
            font-weight: 500;
            transition: all 0.3s ease-in-out;
        }
        .status-default {
             background-color: #eef2f5;
             color: #6c757d;
        }
        .status-success {
             background-color: var(--success-bg);
             color: var(--success-color);
        }

        /* --- Button --- */
        button {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: #004a80;
        }
        
        button:disabled {
            background-color: #a0b4c2;
            cursor: not-allowed;
        }

        /* --- Responsive Design --- */
        @media (max-width: 500px) {
            .date-group {
                flex-direction: column;
                gap: 0;
            }
             h1 {
                font-size: 1.3rem;
            }
        }

    </style>
</head>
<body>

    <main class="container">
        <h1>Travel Expense Reimbursement</h1>

        <form id="expenseForm">
            <!-- Employee & Date Information -->
            <div class="form-group">
                <label for="employeeName">Employee Name</label>
                <input type="text" id="employeeName" name="employeeName" value="Alex Doe" required>
            </div>

            <div class="date-group">
                <div class="form-group">
                    <label for="startDate">Travel Start Date</label>
                    <input type="date" id="startDate" name="startDate" value="2023-10-26" required>
                </div>
                <div class="form-group">
                    <label for="endDate">Travel End Date</label>
                    <input type="date" id="endDate" name="endDate" value="2023-10-28" required>
                </div>
            </div>

            <!-- Expense Breakdown -->
            <fieldset>
                <legend>Expense Breakdown</legend>
                <div class="form-group">
                    <label for="transport">Transport (e.g., flights, taxi)</label>
                    <input type="number" id="transport" class="expense-input" min="0" step="0.01" placeholder="0.00" value="255.50">
                </div>
                <div class="form-group">
                    <label for="accommodation">Accommodation (e.g., hotel)</label>
                    <input type="number" id="accommodation" class="expense-input" min="0" step="0.01" placeholder="0.00" value="320.00">
                </div>
                <div class="form-group">
                    <label for="meals">Meals</label>
                    <input type="number" id="meals" class="expense-input" min="0" step="0.01" placeholder="0.00" value="115.75">
                </div>
                <div class="form-group">
                    <label for="others">Others (e.g., conference fees)</label>
                    <input type="number" id="others" class="expense-input" min="0" step="0.01" placeholder="0.00" value="50.00">
                </div>
            </fieldset>

            <!-- Total Calculation -->
            <div class="total-display">
                <span>Total Amount:</span>
                <span id="totalAmount">$0.00</span>
            </div>

            <!-- Submission -->
            <button type="submit" id="submitBtn">Submit Request</button>
        </form>

        <!-- Submission Status -->
        <div id="submissionStatus" class="status-default">
            Status: Not Submitted
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // --- DOM Element Selection ---
            const expenseForm = document.getElementById('expenseForm');
            const expenseInputs = document.querySelectorAll('.expense-input');
            const totalAmountDisplay = document.getElementById('totalAmount');
            const submissionStatus = document.getElementById('submissionStatus');
            const submitBtn = document.getElementById('submitBtn');

            // --- Core Function: Calculate Total ---
            function calculateTotal() {
                let total = 0;
                expenseInputs.forEach(input => {
                    // Use parseFloat to handle decimal numbers. Default to 0 if input is empty.
                    const value = parseFloat(input.value) || 0;
                    total += value;
                });
                
                // Format the total to two decimal places and display it.
                totalAmountDisplay.textContent = `$${total.toFixed(2)}`;
            }

            // --- Event Listener for Real-Time Calculation ---
            // Listen for 'input' events on all expense fields.
            expenseInputs.forEach(input => {
                input.addEventListener('input', calculateTotal);
            });

            // --- Event Listener for Form Submission ---
            expenseForm.addEventListener('submit', function(event) {
                // Prevent the default form submission which reloads the page.
                event.preventDefault();
                
                // Provide user feedback.
                submissionStatus.textContent = 'Status: Submitted successfully. Your request is being processed.';
                submissionStatus.classList.remove('status-default');
                submissionStatus.classList.add('status-success');
                
                // Disable the form fields and button to prevent re-submission.
                submitBtn.disabled = true;
                submitBtn.textContent = 'Submitted';
                document.querySelectorAll('input').forEach(input => input.disabled = true);
                
                // In a real application, you would now send the data to a server, e.g., using fetch().
                console.log('Form Submitted!');
                console.log('Employee:', document.getElementById('employeeName').value);
                console.log('Start Date:', document.getElementById('startDate').value);
                console.log('End Date:', document.getElementById('endDate').value);
                console.log('Total:', totalAmountDisplay.textContent);
            });

            // --- Initial Calculation on Page Load ---
            // Calculate the total based on the pre-filled sample data.
            calculateTotal();
        });
    </script>

</body>
</html>