resolution-archive/templates/resulation/resulation.html

{% extends "base.html" %}
{% block content %}
{% if message %}
    <div class="alert alert-success" style="background-color: #d4edda; color: #155724; padding: 15px; margin: 10px 0; border-radius: 4px; border: 1px solid #c3e6cb;">
        {{ message }}
    </div>
{% endif %}
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        color: #333;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f4f6f9;
    }
    
    .form-container {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    h1 {
        color: #2c3e50;
        text-align: center;
        border-bottom: 3px solid #3498db;
        padding-bottom: 10px;
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: bold;
    }
    
    h3 {
        color: #2980b9;
        margin-top: 25px;
        border-left: 4px solid #3498db;
        padding-left: 10px;
    }
    
    p {
        text-align: justify;
        margin-bottom: 15px;
    }
    
    list {
        display: block;
        margin-left: 30px;
    }
    
    list li {
        margin-bottom: 10px;
        position: relative;
        padding-left: 20px;
    }
    
    list li::before {
        content: '•';
        color: #3498db;
        font-weight: bold;
        position: absolute;
        left: -20px;
    }
    
    .form-title {
        color: #2c3e50;
        text-align: center;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: bold;
    }
    
    .form-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 15px;
    }
    
    .form-table th {
        text-align: left;
        padding: 8px;
        color: #34495e;
        font-weight: 600;
        width: 30%;
        vertical-align: middle;
    }
    
    .form-table input[type="text"],
    .form-table input[type="date"] {
        width: 90%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.3s;
    }
    
    .form-table input[type="text"]:focus,
    .form-table input[type="date"]:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 5px rgba(52,152,219,0.3);
    }
    
    .form-table input[type="file"] {
        padding: 8px 0;
    }
    
    .submit-btn {
        background-color: #3498db;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
    }
    
    .submit-btn:hover {
        background-color: #2980b9;
    }
    
    .file-input-wrapper {
        position: relative;
    }
    
    .file-input-label {
        display: inline-block;
        background-color: #f8f9fa;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .alert {
        background-color: #d4edda;
        color: #155724;
        padding: 15px;
        margin: 10px 0;
        border-radius: 4px;
        border: 1px solid #c3e6cb;
        animation: fadeOut 5s forwards;
    }
    
    @keyframes fadeOut {
        0% { opacity: 1; }
        90% { opacity: 1; }
        100% { opacity: 0; }
    }
    
    /* Responsive design */
    @media (max-width: 768px) {
        .form-container {
            margin: 10px;
            padding: 15px;
        }
    
        .form-table th {
            width: 100%;
            display: block;
        }
    
        .form-table td {
            width: 100%;
            display: block;
        }
    
        body {
            padding: 10px;
        }
        
        h1 {
            font-size: 24px;
        }
        
        h3 {
            font-size: 20px;
        }
    }    
</style>
<div class="form-container">
    <h3 class="form-title">Fill up the form and upload your resolutions</h3>
    <form action="{% url "resulation" %}" method="POST" enctype="multipart/form-data">
        <table class="form-table">
          <tr>
            <th>Type of Upload</th>
            <td><input type="text" name="org_unit" value="Meeting Minutes" readonly></td>
        </tr>

            <tr>
                <th>Name of organization</th>
                <td><input type="text" name="org_unit" required></td>
            </tr>
            
            <tr>
                <th>Topic</th>
                <td><input type="text" name="topic" required></td>
            </tr>
            
            <tr>
                <th>Title of the Meeting</th>
                <td><input type="text" name="tittle" required></td>
            </tr>
            
            <tr>
                <th>Meeting Number</th>
                <td><input type="text" name="m_number" required></td>
            </tr>
            
            <tr>
                <th>Meeting Date</th>
                <td><input type="date" name="m_date" required></td>
            </tr>
            
            <tr>
                <th>Meeting Venue</th>
                <td><input type="text" name="m_venue" required></td>
            </tr>
            
            <tr>
                <th>Upload attendance sheet</th>
                <td class="file-input-wrapper">
                    <input type="file" name="attendance_file" required>
                </td>
            </tr>
            
            <tr>
                <th>Upload Resolution</th>
                <td class="file-input-wrapper">
                    <input type="file" name="res_con_mou_file" required>
                </td>
            </tr>
            
            <tr>
                <th></th>
                <td style="text-align: center;">
                    {% csrf_token %}
                    <input type="submit" value="Submit" class="submit-btn">
                </td>
            </tr>
        </table>
    </form>
</div>
{% endblock content %}