Documentation

Collapsed content

Toggleable via the navbar brand.

Documentation

Introduction

Welcome to Thinkfotech's comprehensive documentation for advanced Python learning, encompassing Flask Python with API, web app development, HTML, CSS, and more to help you create a basic admin-level website.

Thinkfotech's documentation is designed to guide students through the intricacies of Python development, providing step-by-step instructions and examples to enhance your understanding of advanced Python concepts.

Note: Before delving into the content, we encourage you to explore the bundled pages within the template. These example pages offer quick tips and insights on creating and utilizing various components, facilitating your learning process as you navigate through the material Should you encounter any questions or require assistance while using this documentation, please don't hesitate to reach out to us via the support form on our profile or by contacting us . We value your feedback and strive to continuously improve our documentation to better serve your learning needs

Python Basics

Start your journey into Python basics by exploring our curated collection of resources:

Access the Python basics questions by clicking the link below:

Python Basics Questions

For the answers to the Python basics questions, click on the following link:

Answers to Python Basics Questions

These resources will help you solidify your understanding of Python fundamentals and prepare you for more advanced topics.

Flask Basics

Welcome to the Flask Basics section, where you'll dive into the world of web development with Flask, a lightweight and flexible Python web framework.

Flask is renowned for its simplicity and ease of use, making it an ideal choice for building web applications, APIs, and more.

In this section, you'll find comprehensive resources to kickstart your journey with Flask:

Access our curated collection of Flask basics tutorials and guides by clicking the link below:

Flask Basics Resources

These resources cover essential concepts such as routing, templates, forms, databases, and more, empowering you to build powerful web applications with Flask.

Whether you're a beginner or seasoned developer, mastering Flask opens up a world of possibilities in web development.

Installation

To customize this project, you need to install its dependencies. Make sure you have Python and pip installed on your computer.

You can find the installation guide for Python here. Usually, pip comes bundled with Python.

Once you have Python and pip installed, navigate to the project's root folder and follow these steps:

1. Download the requirements file:

The requirements.txt file contains a list of all the dependencies needed for the project.

2. Install the dependencies:

This command will install all the necessary packages listed in the requirements.txt file.

Make sure to run these commands from the directory where the requirements.txt file is located.

USER REGISTRATION

The below snippet shows the basic Python Flask API code for user registration. Please ensure that all necessary packages are installed and that the code is properly configured to run.

This section contains code of User Registration Api Code section

from flask import Flask
from flask_restful import Resource,Api, abort, reqparse
from firebase import Firebase
import werkzeug
Config = {
 "apiKey": "AIzaSyD1VOTJS6Az-mReE3zpvM_shigqHBjSaYE",
 "authDomain": "thinkfoteck.firebaseapp.com",
 "databaseURL": "https://thinkfoteck-default-rtdb.firebaseio.com",
 "storageBucket": "thinkfoteck.appspot.com",
};
firebase=Firebase(Config)
db=firebase.database()
storage = firebase.storage()
app=Flask(__name__)
api=Api(app)
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}




userRegParser=reqparse.RequestParser()
userRegParser.add_argument('name', type=str, required=True)
userRegParser.add_argument('email', type=str, required=True)
userRegParser.add_argument('gender', type =str, required =True)
userRegParser.add_argument('dob',type=str,required=True)
userRegParser.add_argument('mobileNumber', type=str, required=True)
userRegParser.add_argument('city', type=str, required=True)
userRegParser.add_argument('password', type=str, required=True)
userRegParser.add_argument('address', type=str, required=True)
userRegParser.add_argument('photo', type=werkzeug.datastructures.FileStorage, location='files')




class UserReg(Resource):
  def post(self):
    args = userRegParser.parse_args()
    if args['photo']:
      if args['photo'].filename.rsplit('.', 1)[1] not in ['jpg','png']:
        abort(400, message='invalid file format')
    userList = db.child('PROFILEPAGE').child('userList').get().val()
    if userList == None:
      userList = {}
    for i in userList:
      if userList[i]['email'] == args['email']:
        abort(400,message='email id already used')
    userCnt = db.child('PROFILEPAGE').child('userCnt').get().val()
    if userCnt == None:
      userCnt = 0
    userCnt += 1
    db.child('PROFILEPAGE').child('userCnt').set(userCnt)
    userID = 'USR' + str(100 + userCnt)
    if args['photo']:
      f = args['photo']
      del args['photo']
      fname = userID + '.' + f.filename.rsplit('.', 1)[1]
      storage.child('PROFILEPAGE').child('userImage').child(fname).put(f)
    else:
      fname = userID + '.png'
      storage.child('PROFILEPAGE').child('userImage').child(fname).put('user.png')
    args['imgUrl'] = storage.child('PROFILEPAGE').child('userImage').child(fname).get_url(None)
    userList[userID] = args
    db.child('PROFILEPAGE').child('userList').set(userList)
    return userList

  def get(self):
    userList = db.child('PROFILEPAGE').child('userList').get().val()
    if userList == None:
      userList = {}
    return userList

api.add_resource(UserReg,'/userreg')

if __name__=='__main__':
  app.run(debug=True, host='0.0.0.0', port=8000)

USER UPDATE

The below snippet shows the basic Python Flask API code for user update. Please ensure that all necessary packages are installed and that the code is properly configured to run.

This section contains code of User Update Api Code section

userUpdtParser=reqparse.RequestParser()
userUpdtParser.add_argument('name', type=str)
userUpdtParser.add_argument('email', type=str)
userUpdtParser.add_argument('gender', type =str)
userUpdtParser.add_argument('dob',type=str)
userUpdtParser.add_argument('mobileNumber', type=str)
userUpdtParser.add_argument('city', type=str)
userUpdtParser.add_argument('address', type=str)
userUpdtParser.add_argument('photo', type=werkzeug.datastructures.FileStorage, location='files')



class UserUpdate(Resource):
  def get(self,userID):
    userList = db.child('PROFILEPAGE').child('userList').get().val()
    if userList == None:
      userList = {}
    userID = userID
    if userID in userList:
      return userList[userID]
    else:
      abort(400, message='user not found')

  def put(self,userID):
    args = userUpdtParser.parse_args()
    userList = db.child('PROFILEPAGE').child('userList').get().val()
    if userList == None:
      userList = {}
    userID = userID.upper()
    if userID in userList:
      if args['name']:
        userList[userID]['name'] = args['name']
      if args['dob']:
        userList[userID]['dob'] = args['dob']
      if args['gender']:
        userList[userID]['gender'] = args['gender']
      if args['mobileNumber']:
        userList[userID]['mobileNumber'] = args['mobileNumber']
      if args['city']:
        userList[userID]['city'] = args['city']
      if args['address']:
        userList[userID]['address'] = args['address']
      if args['email']:
        flag = 0
        for i in userList:
          if userList[i]['email'] == args['email']:
            flag = 1
            break
        if flag == 0:
          userList[userID]['email'] = args['email']
      if args['photo']:
        if args['photo'].filename.rsplit('.', 1)[1] in ['jpg','png']:
          f = args['photo']
          fname = userID + '.' + f.filename.rsplit('.', 1)[1]
          storage.child('PROFILEPAGE').child('photo').child(fname).put(f)
          userList[userID]['imgUrl'] = storage.child('PROFILEPAGE').child('photo').child(fname).get_url(None)
      db.child('PROFILEPAGE').child('userList').set(userList)
      return userList[userID]
    else:
      abort(400, message='food not found')

  def delete(self, foodID):
    userList = db.child('PROFILEPAGE').child('userList').get().val()
    if userList == None:
      userList = {}
    userID = userID.upper()
    if userID in userList:
      del userList[userID]
      db.child('PROFILEPAGE').child('userList').set(userList)
      return userList
    else:
      abort(400, message='user not found')

USER SORT

The below snippet shows the basic Python Flask API code for user sorting. Please ensure that all necessary packages are installed and that the code is properly configured to run.

This section contains code of User Sort Api Code section


class userget(Resource):
  def get(self,cat):
    userList = db.child('PROFILEPAGE').child('userList').get().val()
    if userList == None:
      userList = {}
    temphspList ={}
    if cat == "ALL":
      return userList
    elif cat == "male":
      for i in userList :
        if userList[i]['gender'] == 'male':
          temphspList[i] = userList[i]
      return temphspList
    elif cat == "female":
      for i in userList :
        if userList[i]['gender'] == "female" :
          temphspList[i] = userList[i]
      return temphspList

LOGIN PAGE WEBAPP

The following snippet showcases an Python Webapp Code For Registration. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Webapp for Login Code


from flask import Flask, render_template, request, redirect, url_for, session, make_response
import requests

baseUrl = "http://127.0.0.1:8000"

app = Flask(__name__)
app.secret_key = 'abdc'

@app.route('/login', methods=['POST','GET'])
def login():
  if request.method == 'POST':
    userInput = request.form.to_dict()
    response = requests.post(baseUrl + "/login", data=userInput)
    print(response.json())
    if userInput['loginType'] == 'admin':
      if response.json() == 'valid':
        session['admin'] = 'admin'
        return redirect(url_for('adminHomePage'))
      else:
        resp=make_response(redirect(url_for('adminHomePage')))
        resp.set_cookie('warning','invalid email or password', max_age=5)
        return resp
    elif userInput['loginType'] == 'user':
      if response.json() != 'invalid':
        session['user'] = response.json()
        return redirect(url_for('userhomePage'))
      else:
        resp=make_response(redirect(url_for('userhomePage')))
        resp.set_cookie('warning','invalid email or password', max_age=5)
        return resp

if __name__ == '__main__':
  app.run(debug=True, host='0.0.0.0')

USER REGISTRATION WEBAPP

The following snippet showcases an Python Webapp Code For Registration. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Webapp for Registration Code


@app.route('/userregistration')
def userregistration():
  return render_template('user_registration.html')

@app.route('/userreg', methods=['POST','GET'])
def userReg():
  if request.method == 'POST':
    userInput = request.form.to_dict()
    userImg = request.files['photo']
    photoFile = {'photo' : (userImg.filename, userImg, userImg.content_type)}
    if userImg:
      response = requests.post(baseUrl + '/userreg', data = userInput, files=photoFile)
    else:
      response = requests.post(baseUrl + '/userreg', data = userInput)
    if response.status_code == 400:
      resp=make_response(redirect(url_for('userregistration')))
      resp.set_cookie('warning',str(response.json()['message']), max_age=5)
      return resp
    return redirect(url_for('userlogin'))

ADMIN HOME WEBAPP

The following snippet showcases an Python Webapp Code For Admin Home. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Webapp Code for Admin Home


@app.route('/admin')
def adminHomePage():
  if 'admin' in session:
    userdetatails = requests.get(baseUrl + '/UserUpdate/'+userID).json()
    return render_template('admin_home.html',userdetails=userdetails)
  else:
    warning=request.cookies.get('warning')
    if warning == None:
      warning = ''
    return render_template('admin_login.html', session='admin', warning=warning)

ADMIN USER PROFILE WEBAPP

The following snippet showcases an Python Webapp Code For User Profile. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Webapp for User Profile Code


@app.route('/adminuserprofile/<userID>')
def adminuserprofile(userID):
  if 'admin' in session:
    userdetails = requests.get(baseUrl + '/Updateuser/'+ userID).json()
    return render_template('adminuserprofile.html', userID=userID, userdetails=userdetails)
  else :
    return redirect(url_for('adminHomePage'))

ADMIN USER EDIT WEBAPP

The following snippet showcases an Python Webapp Code For edit User Profile. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Webapp for User Profile Edit Code


@app.route('/adminedituserProfile/<userID>')
def adminedituserProfile(userID):
  if 'admin' in session:
    response = requests.get(baseUrl+'/Updateuser/' + userID)
    userdetails = response.json()
    return render_template('adminedit_user.html', userdetails=userdetails,userID=userID)
  else:
    return redirect(url_for('adminHomePage'))

@app.route('/adminupdateuserProfile/<userID>', methods=['POST','GET'])
def adminupdateuserProfile(userID):
  if 'admin' in session:
    if request.method == 'POST':
      userInput = request.form.to_dict()
      userImg = request.files['photo']
      files = {'photo' : (userImg.filename, userImg, userImg.content_type)}
      if userImg:
        requests.put(baseUrl + '/Updateuser/' + userID, data=userInput, files=files)
      else:
        requests.put(baseUrl + '/Updateuser/' + userID, data=userInput)
      return redirect(url_for('adminuserprofile',userID=userID))
  else:
    return redirect(url_for('adminHomePage'))

USER LOGIN HTML

The following snippet showcases an HTML login form. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of User Login Html Code


<<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Login</title>
</head>
<body>
<div class="log-form">
  <h2>Login to your account</h2>
  <form>
    <input type="text" title="username" placeholder="username" />
    <input type="password" title="username" placeholder="password" />
    <button type="submit" class="btn">Login</button>
    <a class="forgot" href="#">Not a User Sign In</a>
  </form>
</div>
</body>
</html>

USER LOGIN HTML & CSS

The following snippet showcases an HTML and CSS code for a better styled Login Page. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of User Login Html and CSS Code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  font-family: 'Open Sans', sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

.main-container {
  width: 100%;
  height: 100vh;
   background: url('https://images.pexels.com/photos/176851/pexels-photo-176851.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
  transition: 0.4s linear;
}

.box {
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .8);
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 0px 15px 25px rgba(0, 0, 0, .5);
  border-radius: 10px;
}

.box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.box p {
  margin-bottom: 0;
}

.box p:nth-child(even) {
  margin-top: 0;
}

.box a {
  color: #9a9d9e;
  font-size: 14px;
  text-decoration: none;
}

.box .input-box {
  position: relative;
}

.box .input-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  margin-bottom: 30px;
  color: #fff;
  border: 1px solid #fff;
  border: none;
  border-bottom-style: solid;
  outline: none;
  letter-spacing: 1px;
  background: transparent;
}

.box .input-box label {
  position: absolute;
  color: #fff;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  pointer-events: none;
  transition: .5s;
}

.box .input-box input:focus ~ label,
.box .input-box input:valid ~ label{
  top: -18px;
  left: 0;
  color: #03a9f4;
  font-size: 12px;
}

.box input[type=submit] {
  background: transparent;
  border: none;
  outline: none;
  background: #03a9f4;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

#logged-in {
  width: 100%;
  height: auto;
  text-align: center;
  margin: auto;
  position: absolute;
  top: 50px;
  display: none;
}

.login-true {
  opacity: 0;
}
</style>
</head>
<body class="login">
<header></header>
<div id="main" class="main-container">
<div class="box">
  <h2>Login</h2>
  <form>
    <div class="input-box">
      <input id="user-name" type="text" name="" required="">
      <label>Username</label>
    </div>
    <div class="input-box">
      <input id="user-pass" type="password" name="" required="">
      <label>Password</label>
    </div>
    <input id="submit" type="submit" name="" value="Submit">
  </form>
  <p><a href="#">Not a User Register</a></p>
</div>
</div>

<div id="logged-in">
</div></body>
</html>

USER REGISTRATION HTML

The following snippet showcases an HTML code for a Registration Page. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of User Registration Html Code


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<link rel="stylesheet" href="/static/css/studentregistration.css">
  <style type="text/css">


  </style>
  <div class="wrapper" style="margin-left: 550px;">
    <h2 style="color: lightgoldenrodyellow;">STUDENT Registration</h2>
    <form action="" method="post" enctype="multipart/form-data" style="display: grid; gap: 15px;">
        <div class="input-box">
            <input type="text" placeholder="Name" required name="name">
        </div>
        <div class="input-box">
            <input type="email" placeholder="Email" required name="email">
        </div>
        <div class="input-box">
            <input type="text" placeholder="Date of Birth" required name="dob">
        </div>
        <div class="input-box">
            <select name="gender" required style="display:grid;">
                <option value="" disabled selected>Select Gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
            </select>
        </div>
        <div class="input-box">
            <input type="tel" placeholder="Mobile Number" required name="mobileNumber">
        </div>
        <div class="input-box">
            <input type="text" placeholder="City" required name="city">
        </div>
        <div class="input-box">
            <input type="text" placeholder="Registration Number" required name="registerno">
        </div>
        <div class="input-box">
            <input type="text" placeholder="Class" required name="class">
        </div>
        <div class="input-box">
            <input type="text" placeholder="Pickup Location" required name="pickup_location">
        </div>
        <div class="input-box">
            <input type="text" placeholder="Guardian Name" required name="guardian_name">
        </div>
        <div class="input-box">
            <input type="password" placeholder="Password" required name="password">
        </div>
        <div class="input-box">
            <input type="text" placeholder="Address" required name="address">
        </div>
        <div class="input-box">
            <select name="bus_id" required style="display:inline-grid;">
                <option value="" disabled selected>Select Bus ID</option>
                <!-- Add your bus IDs as options -->
                <option value="bus1">Bus 1</option>
                <option value="bus2">Bus 2</option>
                <!-- Add more options as needed -->
            </select>
        </div>
        <div class="input-box">
            <input type="file" placeholder="Photo" name="photo">
        </div>
        <div class="input-box button">
            <input style="color: lightgoldenrodyellow;" type="Submit" value="Register Now">
        </div>
    </form>
</div>

</body>
</html>

ADMIN LAYOUT HTML

The following snippet showcases an HTML code Admin Layout. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Admin Layout Html Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ADMIN HOME PAGE</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        /* Custom CSS for the navigation bar */
        nav {
            background-color: #1976d2; /* Background color */
            height: 80px;
            line-height: 80px;
        }

        .brand-logo {
            margin-left: 20px;
            font-weight: bold;
        }

        .right a {
            color: #fff; /* Navigation links color */
        }

        .right a:hover {
            background-color: #1565c0; /* Navigation links background color on hover */
        }

        .dropdown-content li > a, .dropdown-content li > span {
            color: #1976d2; /* Dropdown links color */
        }

        .dropdown-content li > a:hover, .dropdown-content li > span:hover {
            background-color: #f5f5f5; /* Dropdown links background color on hover */
            color: #333; /* Hovered dropdown links color */
        }

        .sidenav-trigger {
            color: #fff; /* Sidenav trigger icon color */
        }
    </style>
</head>
<body>

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">ADMIN HOME PAGE</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
            <li>
                <a class='dropdown-trigger' href='#' data-target='dropdown1'>
                    <i class="material-icons right">account_circle</i>
                    <span style="text-transform: uppercase;">ADMIN</span>!
                </a>
            </li>
        </ul>
    </div>
</nav>

<ul class="sidenav" id="mobile-demo">
    <li><a href="#">Sass</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">Javascript</a></li>
    <li><a href="#">Mobile</a></li>
</ul>

<ul id="dropdown1" class="dropdown-content">
    <li><a href="#"><i class="material-icons left">logout</i>Logout</a></li>
</ul>




<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.sidenav');
        var instances = M.Sidenav.init(elems);
    });

    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.dropdown-trigger');
        var options = {coverTrigger : false};
        var instances = M.Dropdown.init(elems, options);
    });
</script>

</body>
</html>

ADMIN HOME HTML

The following snippet showcases an HTML code Admin Home. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Admin Home Html Code



<link rel="stylesheet" href="/static/css/userreg.css">
<style>
    /* Additional CSS for making the PRODUCT LIST section look cool */
    .tabs {
        background-color: black; /* Background color for tabs */
    }

    .tabs a {
        color: white !important; /* Tab text color */
    }

    .tabs .indicator {
        background-color: yellow; /* Active tab indicator color */
    }

    .tabs .tab a:hover {
        background-color: white !important; /* Background color for tabs when hovered */
        color: black; !important; /* Tab text color when hovered */
    }

    .tabs .tab a.active {
        background-color: white !important; /* Background color for active tab */
        color: black !important; /* Text color for active tab */

    }






</style>

<div class="row">
    <div class="col s12">
        <h5 class="center blue-grey-text text-darken-2" style="color: yellow;">USER LIST</h5>
    </div>
    <div class="col s12">
        <ul class="tabs">
            <li class="tab col s12"><a href="#userlist">USERS</a></li>
        </ul>
    </div>
</div>

<div id="userlist" class="col s12">

<div class="box">
      <div class="card">
        <div class="imgBx">
            <img src="https://images.unsplash.com/photo-1532123675048-773bd75df1b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
        </div>
        <div class="details">
            <h2>SomeOne Famous<br><span><a href="">More Details</a></span></h2>
        </div>
      </div>
    
       <div class="card">
         <div class="imgBx">
            <img src="https://images.unsplash.com/photo-1549417229-aa67d3263c09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
         </div>
         <div class="details">
            <h2>SomeOne Famous<br><span><a href="#">More Details</a></span></h2>
        </div>
       </div>

       <div class="card">
         <div class="imgBx">
            <img src="https://images.unsplash.com/photo-1548094878-84ced0f6896d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
         </div>
         <div class="details">
            <h2>SomeOne Famous<br><span><a href="#">More Details</a></span></h2>
        </div>
       </div>
       <div class="card">
         <div class="imgBx">
            <img src="https://images.unsplash.com/photo-1548094878-84ced0f6896d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
         </div>
         <div class="details">
            <h2>SomeOne Famous<br><span><a href="#">More Details</a></span></h2>
        </div>
       </div>
       <div class="card">
         <div class="imgBx">
            <img src="https://images.unsplash.com/photo-1548094878-84ced0f6896d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
         </div>
         <div class="details">
            <h2>SomeOne Famous<br><span><a href="#">More Details</a></span></h2>
        </div>
       </div>
       <div class="card">
         <div class="imgBx">
            <img src="https://images.unsplash.com/photo-1548094878-84ced0f6896d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
         </div>
         <div class="details">
            <h2>SomeOne Famous<br><span><a href="#">More Details</a></span></h2>
        </div>
       </div>
       <div class="card">
         <div class="imgBx">
            <img src="https://images.unsplash.com/photo-1548094878-84ced0f6896d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="images">
         </div>
         <div class="details">
            <h2>SomeOne Famous<br><span><a href="#">More Details</a></span></h2>
        </div>
       </div>
 
  </div> 


</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script type="text/javascript">
    var el = document.querySelector('.tabs');
    var instance = M.Tabs.init(el);
</script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Initialize modal
    var modalElems = document.querySelectorAll('.modal');
    var modalInstances = M.Modal.init(modalElems);

    // Trigger modal on button click
    var modalTrigger = document.querySelector('.modal-trigger');
    modalTrigger.addEventListener('click', function () {
      var instance = M.Modal.getInstance(modalElems[0]);
      instance.open();
    });
  });
</script>

ADMIN USER PROFILE HTML

The following snippet showcases an HTML code Admin User Profile. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Admin User Profile Html Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Page</title>

    <!-- Custom Css -->
    <link rel="stylesheet" href="style.css">

    <!-- FontAwesome 5 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>
<body>





    <!-- Navbar top -->
    <div class="navbar-top">
        <div class="title">
            <h1>Profile</h1>
        </div>

        <!-- Navbar -->
        <ul>
            <li>
                <a href="#message">
                    <i class="fa fa-home fa-2x"></i>
                </a>
            </li>
            <li>
                <a href="#sign-out">
                    <i class="fa fa-sign-out-alt fa-2x"></i>
                </a>
            </li>
        </ul>
        <!-- End -->
    </div>
    <!-- End -->

    <!-- Sidenav -->
    <div class="sidenav">
        <div class="profile">
            <img src="https://imdezcode.files.wordpress.com/2020/02/imdezcode-logo.png" alt="" width="100" height="100">

            <div class="name">
                ImDezCode
            </div>
            <div class="job">
                Web Developer
            </div>
        </div>

        <div class="sidenav-url">
            <div class="url">
                <a href="#profile" class="active">Profile</a>
                <hr align="center">
            </div>
        </div>
    </div>
    <!-- End -->

    <!-- Main -->
    <div class="main">
        <h2>IDENTITY</h2>
        <div class="card">
            <div class="card-body">
                <li>
                <a href="#sign-out">
                    <i class="fa fa-pen fa-xs edit"></i>
                </a>
            </li>
                
                <table>
                    <tbody>
                        <tr>
                            <td>Name</td>
                            <td>:</td>
                            <td>ImDezCode</td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td>:</td>
                            <td>imdezcode@gmail.com</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>:</td>
                            <td>Bali, Indonesia</td>
                        </tr>
                        <tr>
                            <td>Hobbies</td>
                            <td>:</td>
                            <td>Diving, Reading Book</td>
                        </tr>
                        <tr>
                            <td>Job</td>
                            <td>:</td>
                            <td>Web Developer</td>
                        </tr>
                        <tr>
                            <td>Skill</td>
                            <td>:</td>
                            <td>PHP, HTML, CSS, Java</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <h2>SOCIAL MEDIA</h2>
        <div class="card">
            <div class="card-body">
                <i class="fa fa-pen fa-xs edit"></i>
                <div class="social-media">
                    <span class="fa-stack fa-sm">
                        <i class="fas fa-circle fa-stack-2x"></i>
                        <i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
                    </span>
                    <span class="fa-stack fa-sm">
                        <i class="fas fa-circle fa-stack-2x"></i>
                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                    </span>
                    <span class="fa-stack fa-sm">
                        <i class="fas fa-circle fa-stack-2x"></i>
                        <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
                    </span>
                    <span class="fa-stack fa-sm">
                        <i class="fas fa-circle fa-stack-2x"></i>
                        <i class="fab fa-invision fa-stack-1x fa-inverse"></i>
                    </span>
                    <span class="fa-stack fa-sm">
                        <i class="fas fa-circle fa-stack-2x"></i>
                        <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                    </span>
                    <span class="fa-stack fa-sm">
                        <i class="fas fa-circle fa-stack-2x"></i>
                        <i class="fab fa-whatsapp fa-stack-1x fa-inverse"></i>
                    </span>
                    <span class="fa-stack fa-sm">
                        <i class="fas fa-circle fa-stack-2x"></i>
                        <i class="fab fa-snapchat fa-stack-1x fa-inverse"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- End -->
</body>
</html>

USER REGISTRATION CSS

The following snippet showcases an CSS code for a better styled Registration Page. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of User Registration CSS Code


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.wrapper {
  position: relative;
  max-width: 430px;
  width: 450%;
  background: rgba(0, 0, 0, 0.5); /* Adjust the opacity (the last value) as needed */
  padding: 34px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}


.wrapper h2{
  position: relative;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.wrapper h2::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 28px;
  border-radius: 12px;
  background: black;
}
.wrapper form{
  margin-top: 30px;
}
.wrapper form .input-box{
  height: 52px;
  margin: 18px 0;
}
form .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 400;
  color: #333;
  border: 1.5px solid #C7BEBE;
  border-bottom-width: 2.5px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.form-group select,
.input-box input[type="date"] {
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 400;
  color: #333;
  border: 1.5px solid #C7BEBE;
  border-bottom-width: 2.5px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.form-group select:focus,
.form-group select:valid,
.input-box input[type="date"]:focus,
.input-box input[type="date"]:valid {
  border-color: bisque; /* Change to red color */
}

.address textarea {
  height: 150px; /* Increase the height to create more space for the address */
  width: 100%;
  outline: none;
  padding: 10px 15px; /* Adjust padding as needed */
  font-size: 17px;
  font-weight: 400;
  color: #333;
  border: 1.5px solid #C7BEBE;
  border-bottom-width: 2.5px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.address textarea:focus,
.address textarea:valid {
  border-color: bisque; /* Change to red color */
}

form .policy{
  display: flex;
  align-items: center;
}
form h3{
  color: #707070;
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
}
.input-box.button input{
  color: ghostwhite;
  letter-spacing: 1px;
  border: none;
  background: darkgrey;
  cursor: pointer;
}
.input-box.button input:hover{
  background: #0e4bf1;
}
form .text h3{
 color: #333;
 width: 100%;
 text-align: center;
}
form .text h3 a{
  color: #FF0000;
  text-decoration: none;
}
form .text h3 a:hover{
  text-decoration: underline;
}

ADMIN HOME CSS

The following snippet showcases an CSS code for a better styled Admin Home Page. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Admin Home Page CSS Code



    body {
    align-items: center;
    min-height: 100vh;
    background: #212121;
    font-family: sans-serif;
}

.box {
    width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 15px;
    margin: 0 auto;
}

.card {
    position: relative;
    width: 300px;
    height: 350px;
    background: #fff;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.card:before,
.card:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
    transition: 0.5s;
    z-index: -1;
}

.card:hover:before {
    transform: rotate(20deg);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
}

.card:hover:after {
    transform: rotate(10deg);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
}

.card .imgBx {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    background: #222;
    transition: 0.5s;
    z-index: 1;
}

.card:hover .imgBx {
    bottom: 80px;
}

.card .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .details {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 60px;
    text-align: center;
}

.card .details h2 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 20px;
    color: #777;
    text-transform: uppercase;
}

.card .details h2 span {
    font-weight: 500;
    font-size: 16px;
    color: #f38695;
    display: block;
    margin-top: 5px;
}

ADMIN USER PROFILE CSS

The following snippet showcases an CSS code for a better styled Admin USER PROFILE Page. Please ensure that all necessary packages are installed and that the code is properly configured to run

This section contains code of Admin User Profile Page CSS Code

                           /* Import Font Dancing Script */
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

* {
    margin: 0;
}

body {
    background-color: #e8f5ff;
    font-family: Arial;
    overflow: hidden;
}

/* NavbarTop */
.navbar-top {
    background-color: #fff;
    color: #333;
    box-shadow: 0px 4px 8px 0px grey;
    height: 70px;
}

.title {
    font-family: 'Dancing Script', cursive;
    padding-top: 15px;
    position: absolute;
    left: 45%;
}

.navbar-top ul {
    float: right;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 18px 50px 0 40px;
}

.navbar-top ul li {
    float: left;
}

.navbar-top ul li a {
    color: #333;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
}

.icon-count {
    background-color: #ff0000;
    color: #fff;
    float: right;
    font-size: 11px;
    left: -25px;
    padding: 2px;
    position: relative;
}

/* End */

/* Sidenav */
.sidenav {
    background-color: #fff;
    color: #333;
    border-bottom-right-radius: 25px;
    height: 86%;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
    position: absolute;
    top: 70px;
    width: 250px;
}

.profile {
    margin-bottom: 20px;
    margin-top: -12px;
    text-align: center;
}

.profile img {
    border-radius: 50%;
    box-shadow: 0px 0px 5px 1px grey;
}

.name {
    font-size: 20px;
    font-weight: bold;
    padding-top: 20px;
}

.job {
    font-size: 16px;
    font-weight: bold;
    padding-top: 10px;
}

.url, hr {
    text-align: center;
}

.url hr {
    margin-left: 20%;
    width: 60%;
}

.url a {
    color: #818181;
    display: block;
    font-size: 20px;
    margin: 10px 0;
    padding: 6px 8px;
    text-decoration: none;
}

.url a:hover, .url .active {
    background-color: #e8f5ff;
    border-radius: 28px;
    color: #000;
    margin-left: 14%;
    width: 65%;
}

/* End */

/* Main */
.main {
    margin-top: 2%;
    margin-left: 29%;
    font-size: 28px;
    padding: 0 10px;
    width: 58%;
}

.main h2 {
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    margin-bottom: 10px;
}

.main .card {
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 1px 1px 8px 0 grey;
    height: auto;
    margin-bottom: 20px;
    padding: 20px 0 20px 50px;
}

.main .card table {
    border: none;
    font-size: 16px;
    height: 270px;
    width: 80%;
}

.edit {
    position: absolute;
    color: #e7e7e8;
    right: 14%;
}

.social-media {
    text-align: center;
    width: 90%;
}

.social-media span {
    margin: 0 10px;
}

.fa-facebook:hover {
    color: #4267b3 !important;
}

.fa-twitter:hover {
    color: #1da1f2 !important;
}

.fa-instagram:hover {
    color: #ce2b94 !important;
}

.fa-invision:hover {
    color: #f83263 !important;
}

.fa-github:hover {
    color: #161414 !important;
}

.fa-whatsapp:hover {
    color: #25d366 !important;
}

.fa-snapchat:hover {
    color: #fffb01 !important;
}

Collapsed content

Documentation

Python API

Python WEBAPP

HTML

CSS

Documentation

Introduction

Python Basics

Flask Basics

Installation

USER REGISTRATION

USER UPDATE

USER SORT

LOGIN PAGE WEBAPP

USER REGISTRATION WEBAPP

ADMIN HOME WEBAPP

ADMIN USER PROFILE WEBAPP

ADMIN USER EDIT WEBAPP

USER LOGIN HTML

USER LOGIN HTML & CSS

USER REGISTRATION HTML

ADMIN LAYOUT HTML

ADMIN HOME HTML

ADMIN USER PROFILE HTML

USER REGISTRATION CSS

ADMIN HOME CSS

ADMIN USER PROFILE CSS