resolution-archive/templates/registration/signup.html

{% extends "base.html" %}
{% block content %}
<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>
            {% if messages %}
        <div class="messages">
            {% for message in messages %}
            <div{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</div>
            {% endfor %}
        </div>
{% endif %}
<div class="form-container">
    <h3 class="form-title">Sign Up</h3>
    <form action="{% url "signup" %}" method="POST" enctype="multipart/form-data">
        <table class="form-table">
        <tr>
            <th align="left">Userneme:</th>
            <td><input type="text" id="username" name="username" required></td>
        </tr>
        <tr>
            <th align="left">Email:</th>
            <td><input type="email" id="email" name="email" required></td>
        </tr>
        <tr>
            <th align="left">Password:</th>
            <td><input type="password" id="password1" name="password1" required></td>
        </tr>
        <tr>
            <th align="left">Confirm Password:</th>
            <td><input type="password" id="password2" name="password2" required></td>
        </tr>
        {% csrf_token %}
        <tr>
            <th></th>
            <td strong center><input Type="Submit"></td>
        </tr>
        <tr>
            <th> Already have an account? <a href="{% url 'login' %}">Login here</a></th>
        </tr>
        </table>
    </form>
</div>
{% endblock content %}