User Authentication Based Django App
  • Python Django
  • Basic Python Virtual Environment Setup
  • Project Set Up
  • Model-View-Templates Implementation
  • Model & Django Admin Area
  • View
    • Types of Views in Django
    • Project Todo Views
  • Django Templates
  • Todo App
    • DEMO: Workflow of Todo App
    • Base Template for Todo App
    • Registration Module
    • Login Module
    • Linking Login and Registration page
    • Task List User Authentication
    • Task Reordering
    • Logout Module
    • Task Create Module
    • Task Update
    • Task Delete
Powered by GitBook
On this page
  1. Todo App

Base Template for Todo App

Django templates support template inheritance, allowing you to create a base template with common structure and define blocks that child templates can override.

templates/todo/main.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="description"
        content="This is to do list implemented using Django by Dennis Ivy who is a full stack web developer.">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>To Do Items</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">

    <style>
        body {
            background-color: #FAFAFA;
            font-family: 'Nunito', sans-serif;
            padding-top: 50px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6{
            font-family: 'Raleway', sans-serif;
        }

        a,
        p {
            color: #4b5156
        }

        a {
            font-weight: 600;
        }

        .container {
            max-width: 550px;
            margin: auto;
            background-color: #fff;
            -webkit-box-shadow: 2px 2px 13px -4px rgba(0, 0, 0, 0.21);
            box-shadow: 2px 2px 13px -4px rgba(0, 0, 0, 0.21);
        }

        input {
            outline: none;
            border: none;
        }

        .header-bar {
            display: flex;
            justify-content: space-between;
            color: #fff;
            padding: 10px;
            border-radius: 5px 5px 0 0;
            background: linear-gradient(90deg, #EEA390 0%, #EB796F 43%, #EB796F 100%);
        }

        .header-bar a {
            color: rgb(247, 247, 247);
            text-decoration: none;
        }

        .task-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            border-top: 1px solid #dfe4ea;
            overflow: hidden;
        }

        .task-title {
            display: flex;
            padding: 20px;
        }

        .task-title a {
            text-decoration: none;
            color: #4b5156;
            margin-left: 10px;
        }

        .task-complete-icon {
            height: 20px;
            width: 20px;
            background-color: rgb(105, 192, 105);
            border-radius: 50%;
        }

        .task-incomplete-icon {
            height: 20px;
            width: 20px;
            background-color: rgb(218, 218, 218);
            border-radius: 50%;
        }

        .delete-link {
            text-decoration: none;
            font-weight: 900;
            color: #cf4949;
            font-size: 22px;
            line-height: 0;
            padding: 20px 0px;
        }

        /*Handle Classes*/

        .handle {
            display: inline-block;
            padding: 20px 16px;
            cursor: grab;
            user-select: none;
        }

        .handle:after,
        .handle:before {
            display: block;
            content: "";
        }

        .handle:active,
        .handle:active:before,
        .handle:active:after {
            cursor: grabbing;
        }

        .dropArea {
            background-color: #f1f2f6;
            color: black;
            border: #ced6e0 1px solid;
        }

        .selectedTask {
            opacity: 0.6;
        }


        #add-link {
            color: #EB796F;
            text-decoration: none;
            font-size: 42px;
            text-shadow: 1px 1px #81413b;
        }

        #search-add-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }

        span.aesthetic-span{
            color: red;
            font-weight: bold;
        }

        @media screen and (max-width:320px) {
            #search-add-wrapper {
                padding: 10px;
            }
        }

        input[type=text],
        input[type=password],
        textarea {
            border: 1px solid #757575;
            border-radius: 5px;
            padding: 10px;
            width: 90%;
        }

        label {
            padding-top: 10px !important;
            display: block;
        }

        ::placeholder {
            font-weight: 300;
            opacity: 0.5;
        }

        .button {
            border: 1px solid #757575;
            background-color: #FFF;
            color: #EB796F;
            padding: 10px;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .card-body {
            padding: 20px;
        }
    </style>
</head>

<body>

    <div class="container">
        {% block content %} {% endblock content %}
    </div>

</body>


</html>
PreviousDEMO: Workflow of Todo AppNextRegistration Module

Last updated 1 year ago