kancelyary_project/templates/add_partner.html

{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <h2>Добавление нового партнера</h2>
    <a href="{{ url_for('partners') }}" class="btn-back">Назад к списку</a>
</div>

<form method="POST" class="partner-form" onsubmit="return validateForm()">
    <div class="form-section">
        <h3>Основная информация</h3>

        <div class="form-group">
            <label for="name">Наименование партнера *</label>
            <input type="text" id="name" name="name" required maxlength="255">
        </div>

        <div class="form-group">
            <label for="director">Директор</label>
            <input type="text" id="director" name="director" maxlength="255">
        </div>

        <div class="form-row">
            <div class="form-group half">
                <label for="email">Email *</label>
                <input type="email" id="email" name="email" required>
            </div>

            <div class="form-group half">
                <label for="phone">Телефон</label>
                <input type="tel" id="phone" name="phone" placeholder="+7 (999) 123-45-67">
            </div>
        </div>
    </div>

    <div class="form-section">
        <h3>Юридическая информация</h3>

        <div class="form-group">
            <label for="legal_address">Юридический адрес</label>
            <textarea id="legal_address" name="legal_address" rows="3"></textarea>
        </div>

        <div class="form-row">
            <div class="form-group half">
                <label for="inn">ИНН *</label>
                <input type="text" id="inn" name="inn" required pattern="\d{10}|\d{12}"
                       title="ИНН должен содержать 10 или 12 цифр">
                <small class="form-text">10 или 12 цифр</small>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn-submit">Добавить партнера</button>
        <button type="reset" class="btn-reset">Очистить</button>
    </div>
</form>

<script>
function validateForm() {
    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const inn = document.getElementById('inn').value.trim();

    if (!name) {
        alert('Введите наименование партнера');
        return false;
    }

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('Введите корректный email');
        return false;
    }

    const innRegex = /^\d{10}$|^\d{12}$/;
    if (!innRegex.test(inn)) {
        alert('ИНН должен содержать 10 или 12 цифр');
        return false;
    }

    return true;
}

// Форматирование телефона
document.getElementById('phone').addEventListener('input', function(e) {
    let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
    e.target.value = !x[2] ? x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
});
</script>

<style>
.partner-form {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
}

.form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #E0E0E0;
}

.form-section h3 {
    color: #696969;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group.half {
    flex: 1;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-family: 'Calibri', sans-serif;
    font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #696969;
}

.form-text {
    display: block;
    color: #666;
    font-size: 0.85rem;
    margin-top: 5px;
}

.form-actions {
    text-align: center;
    margin-top: 30px;
}

.btn-submit {
    background-color: #696969;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Calibri', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: #555;
}

.btn-reset {
    background-color: #E0E0E0;
    color: #696969;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Calibri', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-left: 10px;
    transition: background-color 0.3s;
}

.btn-reset:hover {
    background-color: #D0D0D0;
}

.btn-back {
    display: inline-block;
    background-color: #E0E0E0;
    color: #696969;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-back:hover {
    background-color: #D0D0D0;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}
</style>
{% endblock %}