anurag.r/B42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

base setup

Browse Source
This commit is contained in:
anurag.r
2026-01-07 12:09:20 +05:30
commit 0c275efea1
278 changed files with 11228 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
at_django_boilerplate/accounts/templates/registration/signup.html Executable file
View File

@@ -0,0 +1,316 @@
{% extends 'public_base.html' %}
{% load static %}
{% load custom_tags %}
{% block title %}Sign Up | Register your startup{% endblock %}
{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-purple-50 py-8 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-6xl">
<div class="bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">
<div class="flex flex-col lg:flex-row">
<!-- Left Side - Image Card (Hidden on mobile) -->
<div class="hidden lg:block lg:w-2/5 bg-gradient-to-br from-indigo-600 to-purple-700 p-8 lg:p-12">
<div class="flex flex-col justify-center items-center text-center text-white h-full">
<div class="max-w-sm">
<img src="{% static 'img/images or rys/Startup India Registration/hero1.png' %}" alt="Startup Registration" class="w-full h-48 lg:h-56 mb-6 lg:mb-8 rounded-lg">
<h2 class="text-2xl font-bold mb-4">Start Your Entrepreneurial Journey</h2>
<div class="space-y-4 text-left">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
<span class="text-sm">Quick and hassle-free registration process</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
<span class="text-sm">Expert guidance for startup compliance</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
<span class="text-sm">Secure and confidential data handling</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
<span class="text-sm">Dedicated support for your business growth</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right Side - Form Card -->
<div class="w-full lg:w-3/5 py-8 lg:py-10 px-6 lg:px-8">
<!-- Mobile Header with Logo -->
<div class="lg:hidden mb-6 text-center">
<div class="flex justify-center mb-4">
<div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center">
<i class="fas fa-rocket text-white text-2xl"></i>
</div>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-2">Create Your Account</h2>
<p class="text-sm text-gray-600">Join thousands of successful startups</p>
</div>
<!-- Desktop Header -->
<div class="hidden lg:block text-center mb-8">
<h2 class="text-3xl font-bold text-gray-900 mb-2">Create Your Account</h2>
<p class="text-gray-600">Start your entrepreneurial journey with us today</p>
</div>
<!-- Error Display -->
{% if form.errors %}
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 animate-pulse">
<div class="flex items-center">
<i class="fa-solid fa-exclamation-circle mr-2"></i>
<strong class="font-medium">Please correct the following errors:</strong>
</div>
<ul class="list-disc list-inside mt-2 ml-2 text-sm">
{% for field, errors in form.errors.items %}
{% for error in errors %}
<li>{{ error }}</li>
{% endfor %}
{% endfor %}
</ul>
</div>
{% endif %}
<!-- Email Validation Status -->
<div id="email-status" class="flex items-center space-x-2 text-sm mb-4 hidden">
<span id="email-icon" class="text-lg"></span>
<span id="email-text"></span>
</div>
<form method="post" action="{% url 'signup' %}" class="space-y-6" novalidate>
{% csrf_token %}
<!-- Personal Information Section -->
<div class="space-y-5">
<div class="flex items-center mb-2">
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-user text-indigo-600 text-sm"></i>
</div>
<h3 class="text-lg font-semibold text-gray-900">Personal Information</h3>
</div>
<!-- Name Fields -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- First Name -->
<div>
<label for="{{ form.first_name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
First Name <span class="text-red-500">*</span>
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
<i class="fa-solid fa-user"></i>
</span>
{{ form.first_name|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
</div>
</div>
<!-- Last Name -->
<div>
<label for="{{ form.last_name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
Last Name <span class="text-red-500">*</span>
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
<i class="fa-solid fa-user"></i>
</span>
{{ form.last_name|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
</div>
</div>
</div>
<!-- Contact & DOB Fields -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Contact Number -->
<div>
<label for="{{ form.contact_number.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
Contact Number
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
<i class="fa-solid fa-phone"></i>
</span>
{{ form.contact_number|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
</div>
</div>
<!-- Email Field -->
<div>
<label for="{{ form.email.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
Email Address <span class="text-red-500">*</span>
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
<i class="fa-solid fa-envelope"></i>
</span>
{{ form.email|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
</div>
</div>
</div>
</div>
<!-- Password Section -->
<div class="space-y-5">
<div class="flex items-center mb-2">
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-lock text-indigo-600 text-sm"></i>
</div>
<h3 class="text-lg font-semibold text-gray-900">Security</h3>
</div>
<!-- Password Field -->
<div>
<label for="{{ form.password.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
Password <span class="text-red-500">*</span>
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
<i class="fa-solid fa-lock"></i>
</span>
{{ form.password|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
</div>
<!-- Compact Password Requirements -->
<div class="mt-2">
<button type="button" id="password-toggle" class="flex items-center text-xs text-indigo-600 hover:text-indigo-500 transition duration-200">
<i class="fas fa-info-circle mr-1"></i>
View password requirements
</button>
<div id="password-requirements" class="hidden mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
<p class="text-xs font-medium text-blue-700 mb-2">Password Requirements:</p>
<ul class="text-xs text-blue-600 space-y-1">
<li class="flex items-start">
<span class="text-blue-500 mr-1">•</span>
<span>Cannot be too similar to your personal information</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-1">•</span>
<span>Must be at least 8 characters long</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-1">•</span>
<span>Cannot be a commonly used password</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-1">•</span>
<span>Cannot be entirely numeric</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Confirm Password -->
<div>
<label for="{{ form.confirm_password.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
Confirm Password <span class="text-red-500">*</span>
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
<i class="fa-solid fa-lock"></i>
</span>
{{ form.confirm_password|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
</div>
</div>
</div>
<!-- Terms and Conditions -->
<div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100">
<div class="flex items-start">
{{ form.terms_accepted|add_class:"h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded mt-0.5" }}
<label for="{{ form.terms_accepted.id_for_label }}" class="ml-3 block text-sm text-gray-700">
<span class="font-medium text-gray-900">I accept the terms and conditions</span> <span class="text-red-500">*</span>
<p class="text-xs text-gray-500 mt-1">By creating an account, you agree to our Terms of Service and Privacy Policy.</p>
</label>
</div>
{% if form.terms_accepted.errors %}
<div class="text-red-600 text-sm mt-2 ml-8">
{{ form.terms_accepted.errors }}
</div>
{% endif %}
</div>
<!-- Submit Button -->
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-lg transform hover:scale-[1.02] active:scale-[0.98]">
<i class="fa-solid fa-rocket mr-2"></i>
Launch Your Startup Journey
</button>
</div>
<!-- Login Redirect -->
<div class="text-center pt-4">
<p class="text-sm text-gray-600">
Already have an account?
<a href="{% url 'login' %}" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-200 ml-1">
Sign in here
</a>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Email AJAX Validation -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// Email validation
$('#id_email').on('blur', function () {
const username = $(this).val();
if (username) {
$.ajax({
url: '{% url "check_username" %}',
data: { 'username': username },
dataType: 'json',
success: function (data) {
$('#email-status').removeClass('hidden');
if (data.is_taken) {
$('#email-icon').html('<i class="fa-solid fa-times-circle"></i>').removeClass('text-green-600').addClass('text-red-600');
$('#email-text').text('This email is already registered.').removeClass('text-green-600').addClass('text-red-600');
$('#id_email').addClass('border-red-500 focus:border-red-500 focus:ring-red-500');
} else {
$('#email-icon').html('<i class="fa-solid fa-check-circle"></i>').removeClass('text-red-600').addClass('text-green-600');
$('#email-text').text('Email is available.').removeClass('text-red-600').addClass('text-green-600');
$('#id_email').removeClass('border-red-500 focus:border-red-500 focus:ring-red-500');
}
},
error: function() {
$('#email-status').addClass('hidden');
}
});
} else {
$('#email-status').addClass('hidden');
}
});
// Password requirements toggle
$('#password-toggle').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#password-requirements').toggleClass('hidden');
if ($('#password-requirements').hasClass('hidden')) {
$(this).html('<i class="fas fa-info-circle mr-1"></i>View password requirements');
} else {
$(this).html('<i class="fas fa-times mr-1"></i>Hide password requirements');
}
});
// Hide password requirements when clicking outside
$(document).on('click', function(e) {
if (!$(e.target).closest('#password-toggle, #password-requirements').length) {
$('#password-requirements').addClass('hidden');
$('#password-toggle').html('<i class="fas fa-info-circle mr-1"></i>View password requirements');
}
});
});
</script>
{% endblock %}