Skip to content

Created universal authentication templates #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yashsai786 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Created universal authentication templates #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dc25b6b
Create login.html
yashsai786 Oct 31, 2025
f316371
Create signup.html
yashsai786 Oct 31, 2025
11aea3e
Add base HTML template with Bootstrap and Font Awesome
yashsai786 Oct 31, 2025
41b5997
Create login.html with styles and form handling
yashsai786 Oct 31, 2025
2555399
Implement signup page with form validation
yashsai786 Oct 31, 2025
1df5f3a
Revamp home.html with new layout and styles
yashsai786 Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 249 additions & 0 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Application{% endblock %}</title>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
:root {
--primary-color: #6366f1;
--primary-dark: #4f46e5;
--secondary-color: #8b5cf6;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #3b82f6;
--dark-color: #1f2937;
--light-color: #f9fafb;
--border-radius: 12px;
--transition: all 0.3s ease;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
}

/* Navbar Styles */
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1rem 0;
}

.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
color: var(--primary-color) !important;
transition: var(--transition);
}

.navbar-brand:hover {
color: var(--primary-dark) !important;
transform: scale(1.05);
}

.nav-link {
color: var(--dark-color) !important;
font-weight: 500;
margin: 0 0.5rem;
transition: var(--transition);
position: relative;
}

.nav-link:hover {
color: var(--primary-color) !important;
}

.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition);
transform: translateX(-50%);
}

.nav-link:hover::after {
width: 80%;
}

.btn-primary {
background: var(--primary-color);
border: none;
padding: 0.5rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 500;
transition: var(--transition);
}

.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Main Content */
main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}

/* Alert Messages */
.alert {
border-radius: var(--border-radius);
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
animation: slideDown 0.3s ease;
}

@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Footer */
footer {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1.5rem 0;
margin-top: auto;
text-align: center;
color: var(--dark-color);
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}

footer p {
margin: 0;
}

footer a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}

footer a:hover {
color: var(--primary-dark);
}

/* Extra Styles */
{% block extra_css %}{% endblock %}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="{% url 'home' %}">
<i class="fas fa-rocket"></i> MyApp
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">
<i class="fas fa-home"></i> Home
</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-tachometer-alt"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-user"></i> {{ user.username }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">
<i class="fas fa-sign-out-alt"></i> Logout
</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">
<i class="fas fa-sign-in-alt"></i> Login
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="{% url 'signup' %}">
<i class="fas fa-user-plus"></i> Sign Up
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>

<!-- Messages -->
{% if messages %}
<div class="container mt-3">
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
<i class="fas fa-{% if message.tags == 'success' %}check-circle{% elif message.tags == 'error' %}exclamation-circle{% elif message.tags == 'warning' %}exclamation-triangle{% else %}info-circle{% endif %}"></i>
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
</div>
{% endif %}

<!-- Main Content -->
<main>
{% block content %}{% endblock %}
</main>

<!-- Footer -->
<footer>
<div class="container">
<p>&copy; 2024 MyApp. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
</div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Extra Scripts -->
{% block extra_js %}{% endblock %}
</body>
</html>
Loading