resolution-archive/templates/resulation/resulation.html
2025-01-26 11:22:57 +06:00

250 lines
6.0 KiB
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 %}