Login page transition

This commit is contained in:
Gregory Trullemans 2023-11-14 20:23:45 +01:00
parent e873ebeaa0
commit 67f700780d
3 changed files with 100 additions and 10 deletions

View File

@ -41,7 +41,7 @@
<div class="content">
<div class="container">
<div class="col-lg-4 col-md-6 ml-auto mr-auto">
<form class="form" action="/login/" method="post" if="formulaire">
<form class="form" action="/login/" method="post" id="formulaire">
{% csrf_token %}
<div class="card card-login card-white">
<div class="card-header">

View File

@ -0,0 +1,99 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="Gregory Trullemans">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="{% static "img/favicon.png" %}">
<link rel="apple-touch-icon" sizes="76x76" href="{% static "img/apple-icon.png" %}">
<title>• JARVIS •</title>
<link href="{% static 'css/app.css' %}" rel="stylesheet">
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<!-- Nucleo Icons -->
<link href="{% static "css/nucleo-icons.css" %}" rel="stylesheet" />
<!-- CSS Files -->
<link href="{% static "css/black-dashboard.css" %}" rel="stylesheet" />
<!-- Chart JS -->
<script src="{% static "js/plugins/momentjs/moment_2.29.1.min.js" %}"></script>
<script src="{% static "js/plugins/momentjs/moment_locale_en-gb.js" %}"></script>
<script src="{% static "js/plugins/chartjs/chartjs_3.9.1.min.js" %}"></script>
<script src="{% static "js/plugins/chartjs/chartjs-adapter-moment_1.0.0.js" %}"></script>
</head>
<body class="dark:bg-sky-950 flex items-center justify-center h-screen">
<div class="bg-slate-800 p-8 rounded shadow-md w-96 text-white">
<h2 class="text-2xl font-semibold mb-6">Connection</h2>
<form action="/login/" method="post" id="formulaire">
{% csrf_token %}
<div class="mb-4">
<input type="text" id="username" name="login" class="mt-1 p-2 w-full border rounded-t-md" placeholder="Username">
<input type="password" id="password" name="password" class="p-2 w-full border rounded-b-md" placeholder="Password">
</div>
<button type="submit" class="bg-blue-500 text-white p-2 rounded-md w-full">Log me in</button>
</form>
</div>
<script src="{% static "js/core/jquery-3.6.0.min.js" %}"></script>
<script src="{% static "js/core/popper.min.js" %}"></script>
<script src="{% static "js/core/bootstrap.min.js" %}"></script>
<script src="{% static "js/plugins/perfect-scrollbar.jquery_1.4.0.min.js" %}"></script>
<script src="{% static "js/plugins/momentjs/moment_2.29.1.min.js" %}"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="{% static "js/plugins/bootstrap-switch_3.3.4.js" %}"></script>
<!-- Plugin for Sweet Alert -->
<script src="{% static "js/plugins/sweetalert2.min.js" %}"></script>
<!-- Plugin for Sorting Tables -->
<script src="{% static "js/plugins/jquery.tablesorter_2.0.5b.js" %}"></script>
<!-- Forms Validations Plugin -->
<script src="{% static "js/plugins/jquery.validate_1.17.0.min.js" %}"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="{% static "js/plugins/jquery.bootstrap-wizard_1.4.2.js" %}"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="{% static "js/plugins/bootstrap-selectpicker_1.12.4.js" %}"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="{% static "js/plugins/bootstrap-datetimepicker_4.17.47.js" %}"></script>
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="{% static "js/plugins/datatables/datatables_1.12.1.min.js" %}"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="{% static "js/plugins/bootstrap-tagsinput_0.8.0.js" %}"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="{% static "js/plugins/jasny-bootstrap_3.1.3.min.js" %}"></script>
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
<script src="{% static "js/plugins/fullcalendar/main.js" %}"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="{% static "js/plugins/jquery-jvectormap_2.0.4.js" %}"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="{% static "js/plugins/nouislider_11.1.0.min.js" %}"></script>
<!-- Google Maps Plugin -->
<!-- Place this tag in your head or just before your close body tag. -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script> -->
<!-- Notifications Plugin -->
<script src="{% static "js/plugins/bootstrap-notify_3.1.5.js" %}"></script>
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc -->
<script src="{% static "js/black-dashboard.min.js" %}"></script>
<script type="text/javascript" >
$(function(){
$('#login').focus();
});
</script>
</body>
</html>

View File

@ -1,9 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}