Develop Reference

Quick question: CSS alteration for DMs on social media site

I am trying to get the image to line up above the sent message as you would have it in most standard DMs: https://prnt.sc/IR__3qyiXqlI (what I want it to look like)
But for some reason, the text attached to the image proceeds to layer itself beside the image rather than below the image, as shown in the screenshot below. When I add float: right; to my CSS the image and the text layer horizontally in a strange manner: what it looks like currently
Ideally, the image should be on the same side as the texts from the person who sent the image and should be just above the message that was attached to the image (as is commonplace).
The HTML doc the DMs are stored on:
thread.html:
> {% extends 'landing/base.html' %} {% load crispy_forms_tags %}
>
> {% block content %}
>
> <div class="container">
> <div class="row">
> <div class="card col-md-12 mt-5 p-3 shadow-sm">
> {% if thread.receiver == request.user %}
> <h5><a href="{% url 'profile' thread.user.profile.pk %}"><img class="rounded-circle post-img" height="50" width="50"
> src="{{ thread.user.profile.picture.url }}" /></a> #{{ thread.user
> }}</h5>
> {% else %}
> <h5>#{{ thread.receiver }}</h5>
> {% endif %}
> </div>
> </div>
>
> {% if message_list.all.count == 0 %}
> <div class="row my-5">
> <div class="col-md-12">
> <p class="empty-text">No messages yet.</p>
> </div>
> </div>
> {% endif %}
>
> {% for message in message_list %}
> <div class="row">
> {% if message.sender_user == request.user %}
> <div class="col-md-12 my-1">
>
> <div class="message-sender-container ms-auto">
> {% if message.image %}
> <img src="{{ message.image.url }}" class="message-image-sent" />
> {% endif %}
> <div class="sent-message my-1">
> <p>{{ message.body }}</p>
> </div>
> </div>
>
>
> </div>
> {% elif message.receiver_user == request.user %}
> <div class="col-md-12">
> {% if message.image %}
> <div class="message-receiver-container offset-6">
> <img src="{{ message.image.url }}" class="message-image-received" />
> </div>
> {% endif %}
> <div class="received-message my-3">
> <p>{{ message.body }}</p>
> </div>
> </div>
> {% endif %}
> </div>
> {% endfor %}
>
>
> <div class="row">
> <div class="card col-md-12 p-3 shadow-sm">
> <form method="POST" action="{% url 'create-message' thread.pk %}" enctype="multipart/form-data">
> {% csrf_token %}
> {{ form | crispy }}
>
> <div class="d-grid gap-2 mt-3">
> <button btn btn-light type="submit">Send Message</button>
> </div>
> </form>
> </div>
> </div> </div>
>
> {% endblock content %}
the relevant CSS file:
style.css:
.empty-text {
color: #777;
font-size: 1.5rem;
text-align: center;
}
.sent-message {
background-color: #d7a5eb;
border-radius: 30px;
padding: 10px 25px;
width: 25%;
float: right;
}
.received-message {
background-color: #cc64c3;
color: #000;
border-radius: 30px;
padding: 10px 25px;
width: 25%;
}
.message-receiver-container {
margin-left: auto;
margin-right: 0;
}
.message-sender-container {
margin-left: 0;
margin-right: auto;
}
.message-image-received {
border-radius: 10px;
max-width: 35%;
height: auto;
}
.message-image-sent {
border-radius: 10px;
max-width: 35%;
height: auto;
float: right;
}
.shared-post {
margin-left: 30px;
}

#Eduardo Tolmasquim
I've tried adding that and even with trial and error it didn't change anything. Despite this, I've managed to ~half way~ fix it, only problem is now the sent messages and received messages are on the wrong side! (i.e. the messages sent by the logged in user are on the left and the messages they received are on the right, on most apps like Whatsapp it is the other way round). This is what it looks like now.
thread.html:
{% extends 'landing/base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<div class="row">
<div class="card col-md-12 mt-5 p-3 shadow-sm">
{% if thread.receiver == request.user %}
<h5><img class="rounded-circle post-img" height="50" width="50" src="{{ thread.user.profile.picture.url }}" /> #{{ thread.user }}</h5>
{% else %}
<h5>#{{ thread.receiver }}</h5>
{% endif %}
</div>
</div>
{% if message_list.all.count == 0 %}
<div class="row my-5">
<div class="col-md-12">
<p class="empty-text">No messages yet.</p>
</div>
</div>
{% endif %}
{% for message in message_list %}
<div class="row">
{% if message.sender_user == request.user %}
<div class="col-md-12 my-1">
{% if message.image %}
<div class="message-sender-container ms-auto">
<img src="{{ message.image.url }}" class="message-image" />
</div>
{% endif %}
<div class="sent-message my-3">
<p>{{ message.body }}</p>
</div>
</div>
{% elif message.receiver_user == request.user %}
<div class="col-md-12 offset-6">
{% if message.image %}
<div>
<img src="{{ message.image.url }}" class="message-image" />
</div>
{% endif %}
<div class="received-message my-3">
<p>{{ message.body }}</p>
</div>
</div>
{% endif %}
</div>
{% endfor %}
<div class="row">
<div class="card col-md-12 p-3 shadow-sm">
<form method="POST" action="{% url 'create-message' thread.pk %}" enctype="multipart/form-data">
{% csrf_token %}
{{ form | crispy }}
<div class="d-grid gap-2 mt-3">
<button btn btn-light type="submit">Send Message</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
style.css:
.empty-text {
color: #777;
font-size: 1.5rem;
text-align: center;
}
.sent-message {
background-color: #d7a5eb;
border-radius: 30px;
padding: 10px 25px;
width: 35%;
}
.received-message {
background-color: #cc64c3;
color: #000;
border-radius: 30px;
padding: 10px 25px;
width: 35%;
}
.message-sender-container {
margin-left: auto;
margin-right: 0;
}
.message-image {
border-radius: 10px;
max-width: 35%;
height: auto;
}
.shared-post {
margin-left: 30px;
}

Creating Relational database with user model in Django. I think i have created relational database but i don't know whats going wrong

I think i have successfully created relation between user model and another table called shop_details but the data is not been inserted. i don't know what is going wrong.
the code is here.
models.py
from django.db import models
from django.contrib.auth.models import User
class Shop_Details(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
shop_name = models.CharField(max_length=50)
shop_street = models.TextField()
shop_area = models.TextField()
city = models.CharField(max_length=50)
state = models.CharField(max_length=50)
pin_code = models.TextField()
my views.py is here
views.py
def shop_detils(request):
if request.method == "POST":
shop_name = request.POST['shop_name']
shop_street = request.POST['shop_street']
shop_area = request.POST['shop_area']
city = request.POST['city']
state = request.POST['state']
pin_code = request.POST['pin_code']
if(len(str(pin_code))!=6):
messages.info(request,"please provide a valid address pin-code")
print("niceee...........................")
return render(request,'shop_details.html')
else:
if(is_number(int(pin_code))):
shop = Shop_Details(shop_name=shop_name,shop_street=shop_street,shop_area=shop_area,city=city,state=state,pin_code=pin_code,user=request.user)
shop.save()
messages.info(request,"Shop Details Updated")
shop_data = Shop_Details.objects.filter(user = request.user)
print(shop_data[1])
print("congrats...........................")
return redirect('home',{'data':shop_data})
else:
messages.info(request,"please provide a valid address")
print("nice2222222222222222222222222")
return render(request,'shop_details.html')
else:
return render(request,'shop_details.html')
my shop_details.html is here
shop_detsils.html
enter code here
{% extends 'layout.html' %}
{% csrf_token %}
{% if user.is_authenticated %}
{% csrf_token %}
{% load static %}
{% csrf_token %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% csrf_token %}
<body align="center">
{% csrf_token %}
{% csrf_token %}
{% csrf_token %}
{% block content %}
<form action="shop_detils" method="POST">
{% csrf_token %}
<div align="center" class='resp_code frms'>
{% csrf_token %}
<p align='center'<h5><font style='font: 1em/1.3em Tahoma,Geneva,sans-serif;'>
<b>Shop Details</b></font></h5></p>
<div id="selection">
{% csrf_token %}
<table>
{% csrf_token %}
<tr><td>Shop Name: </td><td><input required style="width:200%;" name="shop_name" type="text"></td></tr>
<tr><td>Shop Street: </td><td><input required style="width:200%;" name="shop_street" type="text"></td></tr>
<tr><td>Shop Area: </td><td><input required style="width:200%;" name="shop_area" type="text"></td></tr>
<tr><td>City: </td><td><input required style="width:200%;" name="city" type="text"></td></tr>
<tr><td>State: </td><td><input required style="width:200%" list="state" name="state" type="text"></td></tr>
<datalist id="state">
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Puducherry">Puducherry</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
</datalist>
<tr><td>Pin-code: </td><td><input required name="pin_code" type="text"></td></tr>
</table>
<input style="border-radius: 0.5em; background-color:rgba(2, 2, 253, 0.753);
width:2.5cm;height:0.8cm; font-family: sans-serif;" type="submit" value="Submit">
</div>
</div>
</form>
{% endblock %}
</body>
{% endif %}
my layout.html is here. basically Iam extending layout.html in all html files.
layout.html
<!DOCTYPE html>
{% load static %}
{% csrf_token %}
<html>
<title>GrocSale</title>
<head>
<script language="Javascript" href="{% static 'js/jquery.js' %}"></script>
<script type="text/JavaScript" href="{% static 'js/state.js'%}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'style.css'%}">
</head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
{% csrf_token %}
<style>
* {box-sizing: border-box}
body{
background:url("{% static 'groc.jpeg' %}") no-repeat;
background-size:cover ;
background-attachment:fixed;
}
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 20%;
height: 1000px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
.divs{
width: 300px;
height: 300px;
border: 1px solid green;
padding: 50px;
float: left;
border-radius: 1em;
box-shadow: 10px 10px;
margin-right: 15px;
margin-left: 15px;
margin-top: 15px;
}
.divs:hover:not(.active) {
background-color: gold;
cursor: grab;
}
</style>
<body>
{% csrf_token %}
<header align="center" style="height: 150px;background-color:orange">
{% csrf_token %}
<strong>
{% csrf_token %}
{% for detail in data%}
<h1>{{detail.shop_name}}</h1>
<h4>Arokya,Hatsun,Arun All Products Available Here</h4>
<h6>{{detail.shop_street}}{{detail.shop_area}}, {{detail.city}}, {{detail.state}} - {{detail.pin_code}}</h6>
{% endfor %}
</strong>
</header>
<div style="background-color:orange;" class="tab" >
{% csrf_token %}
<button class="w3-bar-item w3-button" >Home</button>
<button class="w3-bar-item w3-button" >Add/Update Product</button>
<button class="w3-bar-item w3-button" >Add Stock/Update Stock</button>
<button class="w3-bar-item w3-button" >Add Sale</button>
<button class="w3-bar-item w3-button" >Total Sale</button>
<button class="w3-bar-item w3-button" >Daily Collection Customers</button>
<button class="w3-bar-item w3-button" >Today's Collection Status</button>
<button class="w3-bar-item w3-button" >Show Products</button>
<button class="w3-bar-item w3-button" >All Stock Orders</button>
<button class="w3-bar-item w3-button" >Settings</button>
<a href="{% url 'shop_detils' %}" ><button class="w3-bar-item w3-button" >Shop Details</button></a>
<button class="w3-bar-item w3-button" >Contact Us</button>
<button class="w3-bar-item w3-button" >Logout</button>
</div>
{% block content %}
{% endblock %}
</body>
</html>
Iam still a learner in Django.
Thanks in advance.
my error is shown in image
enter image description here

how to convert this HTML file into a PDF using python [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I am having a process where my python code needs to generate a PDF.
I have an HTML file as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./proforma_supply_bill.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Karla:wght#400;600;700&family=Rajdhani:wght#700&display=swap"
rel="stylesheet">
<title>Proforma bill of supply</title>
<style>
body {
font-family: "Karla", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
th,
td {
padding: 0 !important;
text-align: left;
position: relative;
}
.mb-3 {
margin-bottom: 3px;
}
.mb-5 {
margin-bottom: 5px;
}
.pr-10{
padding-right: 10px !important;
}
.text-right {
text-align: right;
}
.border-b_color {
border-bottom: 1px solid #93d150;
}
.border-t {
border-top: 1px solid #dedede;
}
.border-b {
border-bottom: 1px solid #dedede;
}
.card {
background-color: #fff;
padding: 0 20px;
}
.card__header,
.card__total_amount,
.card__amount_section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 17px 0;
}
.card__header_img {
width: 175px;
}
.card__header_title {
font-family: "Rajdhani", sans-serif;
font-size: 24px;
font-weight: bold;
color: #2b9eaa;
text-transform: uppercase;
}
.card__info_flex {
display: flex;
padding: 10px 0;
}
.card__info {
flex: 50%;
}
.card__info_row:not(:last-child) {
margin-bottom: 5px;
}
.card__info_title,
.card__table_data_row__content {
color: #141414;
font-size: 15px;
}
.card__info_text {
color: #141414;
font-size: 15px;
font-weight: bold;
}
.card__table {
width: 100%;
border-collapse: collapse;
}
.card__table_header_row {
background-color: #2b9eaa;
}
.card__table_data_row {
border-top: 1px solid #dedede;
}
.card__table_header_row__content {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 6px 0;
}
.card__table_data_row__content {
padding: 5px 0;
}
.card__table_data_row__subcontent {
font-size: 13px;
color: #141414;
width: max-content;
margin-left: 10px;
}
.dashed_b-t {
border-top: 1px dashed #dedede;
}
.card__total_amount {
background-color: #F2F2F2;
padding: 4px 10px 5px;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
.card__amount_section {
padding: 6px 10px 5px;
align-items: flex-start;
}
.card__total_amount__title,
.card__total_amount__title_lg {
font-size: 18px;
color: #141414;
font-weight: bold;
}
.card__declaration {
padding: 6px 10px 5px;
background-color: #D4ECEE;
font-size: 15px;
font-weight: bold;
color: #2b2b2b;
}
.card__signature {
margin-top: 30px;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="card">
<div class="card__header border-b_color">
<img src="https://res.cloudinary.com/exportify/image/upload/v1573547246/ExportifyLogo/exportify_logo_166x31_OG_yhqmrg.svg"
alt="Exportify Logo" class="card__header_img">
<div class="card__header_title">PROFORMA Bill of Supply</div>
</div>
<div class="card__info_flex border-b_color">
<div class="card__info">
<div class="card__info_row">
<span class="card__info_title">Proforma Invoice No.: </span>
<span class="card__info_text">{{PROFORMA_INV_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Reference No. & Date.: </span>
<span class="card__info_text">{{REF_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Buyer's Order No.: </span>
<span class="card__info_text">{{BUYER_ORDER_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Vessel/Flight No.: </span>
<span class="card__info_text">{{VESSEL_NAME}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">City/Port of Loading: </span>
<span class="card__info_text">{{POL}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Terms of Delivery: </span>
<span class="card__info_text">{{DELIVERY_TERMS}}</span>
</div>
</div>
<div class="card__info">
<div class="card__info_row">
<span class="card__info_title">Dated: </span>
<span class="card__info_text">{{INV_DATE}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">SAIL Date: </span>
<span class="card__info_text">{{SAIL_DATE}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Place of Receipt by Shipper: </span>
<span class="card__info_text">{{PLACE_OF_RECEIPT}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">City/Port of Discharge: </span>
<span class="card__info_text">{{POD}}</span>
</div>
</div>
</div>
<div class="card__info_flex" style="padding-bottom: 0;">
<div class="card__info"></div>
<div class="card__info mb-3">
<span class="card__info_title">Buyer (Bill to)</span>
</div>
</div>
<div class="card__info_flex" style="padding-top: 0;">
<div class="card__info">
<div class="card__info_text mb-3">XPORTIFY TECHNOLOGIES PRIVATE LIMITED</div>
<div class="card__info_title mb-5" style="line-height: 20px; width: 85%;">
3rd Floor, 313-314, A/3, BGTA Ganga Premises, Wadala Truck Terminal, Near Wadala RTO, Wadala East,
Mumbai
</div>
<div class="card__info_row">
<span class="card__info_title">GSTIN/UIN: </span>
<span class="card__info_text">27AAACX2283M1ZX</span>
</div>
<div class="card__info_row">
<span class="card__info_title">PAN No: </span>
<span class="card__info_text">AAACX2283M</span>
</div>
<div class="card__info_title mb-5">State Name: Maharashtra, Code: 27</div>
<div class="card__info_row">
<span class="card__info_title">CIN: </span>
<span class="card__info_text">U74999MH2017PTC295494</span>
</div>
</div>
<div class="card__info">
<div class="card__info_text mb-3">{{BUYER_COMPANY_NAME}}</div>
<div class="card__info_title mb-5" style="line-height: 20px;">
{{BUYER_ADDRESS}}
</div>
<div class="card__info_row">
<span class="card__info_title">GSTIN/UIN: </span>
<span class="card__info_text">{{BUYER_GST}}</span>
</div>
<div class="card__info_title mb-5">State Name: {{BUYER_STATE}}</div>
<div class="card__info_row">
<span class="card__info_title">Place of Supply: </span>
<span class="card__info_text">{{BUYER_PLACE_OF_SUPPLY}}</span>
</div>
</div>
</div>
<table class="card__table mb-5">
<thead>
<tr class="card__table_header_row">
<th>
<div class="card__table_header_row__content" style="padding-left: 10px;">Sr. No.</div>
</th>
<th>
<div class="card__table_header_row__content">Description of Services</div>
</th>
<th>
<div class="card__table_header_row__content">HSN/SAC</div>
</th>
<th>
<div class="card__table_header_row__content">Quantity</div>
</th>
<th>
<div class="card__table_header_row__content">Rate</div>
</th>
<th>
<div class="card__table_header_row__content">Per</div>
</th>
<th>
<div class="card__table_header_row__content text-right" style="padding-right: 10px;">
Amount
</div>
</th>
</tr>
</thead>
<tbody>
<tr class="card__table_data_row">
<td>
<div class="card__table_data_row__content" style="padding-left: 10px;">1</div>
</td>
<td>
<div class="card__table_data_row__content">Freight Charges</div>
<div class="card__table_data_row__subcontent">$ 1938/20x1x#74.97</div>
</td>
<td>
<div class="card__table_data_row__content">996521</div>
</td>
<td>
<div class="card__table_data_row__content">1</div>
</td>
<td>
<div class="card__table_data_row__content">7,900.00</div>
</td>
<td>
<div class="card__table_data_row__content">Container</div>
</td>
<td>
<div class="card__table_data_row__content text-right pr-10" style="right: 0;">USD
7,900.00
</div>
</td>
</tr>
</tbody>
</table>
<div class="card__total_amount mb-5">
<div class="card__total_amount__title">Total</div>
<div class="card__total_amount__title_lg">USD 7,900.00</div>
</div>
<div class="card__amount_section border-b mb-3">
<div class="card__amount_section_flex">
<div class="card__info_title mb-3">Amount Chargeable (in words)</div>
<div class="card__info_text">USD Seven Thousand Nine Hundred Only</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">E & O.E</div>
</div>
</div>
<div class="card__amount_section border-t">
<div class="card__amount_section_flex">
<div class="card__info_title">HSN/SAC</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">Taxable Value</div>
</div>
</div>
<div class="card__amount_section border-t mb-3">
<div class="card__amount_section_flex">
<div class="card__info_title">996521</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">INR 1,45,291.86</div>
</div>
</div>
<div class="card__total_amount mb-5">
<div class="card__total_amount__title" style="font-size: 15px;">Total</div>
<div class="card__total_amount__title_lg" style="font-size: 15px;">INR 1,45,291.86</div>
</div>
<div class="card__info_row" style="padding: 10px;">
<span class="card__info_title">Tax Amount (in words): </span>
<span class="card__info_text">NIL</span>
</div>
<div class="card__declaration">
Declaration
</div>
<div class="card__info_title" style="padding: 10px;">
We declare that this invoice shows the actual price of the goods described and that all particulars are true
and correct.
</div>
<div class="card__info_text" style="padding: 0 10px;">
for XPORTIFY TECHNOLOGIES PRIVATE LIMITED
</div>
<div class="card__signature">
<div class="card__info_title">Authorised Signatory</div>
</div>
</div>
</body>
</html>
I want to convert this HTML file into a PDF using Python.
I have one option of using wkhtmltopdf package but I have to run it using the command line everytime.
Which is the most optimal way of doing this without hampering the flow of my code?

Install pdfkit package
pip install pdfkit
Install wkhtmltopdf https://wkhtmltopdf.org/downloads.html
PDF to HTML in the current folder
import pdfkit
import glob
3.1 Set wkhtmltopdf executable file path
config = pdfkit.configuration(wkhtmltopdf='C:/Program Files/wkhtmltopdf/bin/wkhtmltopdf.exe')
3.2 Convert all html files in the current folder
for file in glob.glob('./*.html'):
pdfkit.from_file(file, file[:-4]+'.pdf', configuration=config)

checkbox from a bootstrap for loop from python/flask

HTML file (+Flask+Bootstrap)
{% extends "bootstrap/base.html" %}
{% block content %}
<html>
<head>
<style>
table, th, td {
background: #f5f5f5;
border-collapse: separate;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 24px;
margin: 30px auto;
text-align: left;
width: 800px;
}
.center {
text-align: center;
margin: auto;
width: 80%;
border: 3px solid rgba(0, 0, 0, 0);
padding: 20px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef00;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<a class="navbar-brand"> TMS </a>
<li>Routing</li>
</ul>
</div>
</nav>
<table style="width:auto" align="center">
<tr>
<th>
<p>Select the route sheet:</p>
<div class='center'>
<form ip="upload-form" action="{{ url_for('routing') }}" method="POST"
enctype="multipart/form-data">
<input type="file" name="file" accept="/" multiple>
<input type="submit" action="submit" value="send">
</div>
</th>
</tr>
</table>
{% if ifHTMLConditional %}
<form method='POST' action="{{ url_for('routing') }}">
<table>
<tr>
<th>Name</th>
<th>Meters</th>
</tr>
{% for i in returnFromObjectClassRoute %}
<tr>
<td>
<input type="checkbox" name="vehicle" value= {{ i[1] }}>
{{ i[1] }}
</input>
</td>
<td>
{{ i[2] }}
</td>
</tr>
{% endfor %}
</table>
<input type="submit" value = {{ test.test }}>
{% endif %}
</form>
</body>
</html>
{% endblock %}
How could I use this for loop to create the number of checkboxes but with returns for using them in next functionalities.
The goal of the program is to create a Short Route. With the checkbox I want to let the user to select where is the startPoint for the algorithm
Python Code
#app.route('/routing', methods=['GET', 'POST'])
def routing():
test = Reference()
print(test.test.data)
if test == True:
return redirect('/home')
else:
if request.method == 'POST':
directory = os.path.join(APP_ROOT)
ifHTMLConditional = False
if not os.path.isdir(directory):
os.mkdir(directory)
for file in request.files.getlist("file"):
filename = file.filename
destination = "/".join([directory, filename])
if file.filename != '':
file.save(destination)
objectFromClassRoute = Route(filename, 'totalDistances_AB_BA_12012018.csv')
returnFromObjectClassRoute = objectFromClassRoute.routing1()
ifHTMLConditional = True
else:
returnFromObjectClassRoute = []
ifHTMLConditional = False
return redirect ('/home')
return render_template('routing.html', test=test, returnFromObjectClassRoute=returnFromObjectClassRoute, ifHTMLConditional=ifHTMLConditional)
return render_template('routing.html')
returnFromObjectClassRoute returns a list as a value.

Python code
An example for what I was looking for:
from flask import Flask, render_template, request
app = Flask(__name__)
app.config['SECRET_KEY'] = 'ThisIsSecret'
class Reference():
def testList(self):
testList = ['ABC', 'DEF', 'GHI']
return testList
#app.route('/home', methods=['GET', 'POST'])
def home():
test1 = Reference()
test = test1.testList()
print(test1.testList())
if request.method == "POST":
selected_contacts = request.form.getlist("test")
return render_template('checkBoxTest.html', test=test)
if __name__ == '__main__':
app.run(debug=True)
Html + Jinja2 code
<html>
<head>
</head>
<body>
<form method='POST' action="{{ url_for('home') }}">
{{ test.csrf_token }}
{% for i in test %}
<input type="checkbox" name="test" value="{{i}}">
<label>{{i}}</label>
{% endfor %}
<input type="submit" action="submit">
</form>
</body>
</html>
It returns all the check list you had activate before submitting and return a list of the values where you can used them as you want

Django/WeasyPrint: Bangla Font Rendering Issue

My Python Version 3.6+, Django version 1.11.6 and OS: Windows-10 64bit.
I am creating the PDF file with weasyprint within Django project. But the problem is Bengali font is not rendering. Please check this screenshot.
Now this is my views.py file
def get_pdf_file(request, customer_id, sys_type):
sys_type = customer_id
area = "pdf"
site_credit = site_credit1
time_now = timezone.now()
customers = get_object_or_404(CustomerInfo, pk=customer_id)
due_taka_track = customers.duetaka_set.all()
if due_taka_track == None:
due_taka_track = 0
unpaid_taka = int(customers.customer_price -
customers.customer_due_taka_info)
due_taka_track = customers.duetaka_set.all()
sum_cost_taka = due_taka_track.aggregate(
sp=Sum('customer_due')).get('sp', 0)
if sum_cost_taka == None:
sum_cost_taka = 0
total_paid_taka = sum_cost_taka + customers.customer_due_taka_info
payment_status = 'complete'
payment_message = ' '
remain_taka='Full Paid '
remain_msg=''
if customers.customer_due_taka_info < customers.customer_price:
payment_status = 'incomplete'
payment_message = 'সম্পূর্ন টাকা পরিষোধ করা হয়নি'
remain_msg='টাকা বাকী আছে'
baki_ase="পাওনা আছে "
remain_taka = customers.customer_price - customers.customer_due_taka_info
context = {'customers': customers,
'sys_type': sys_type,
'area': area,
'site_credit': site_credit,
'site_name': 'Moon Telecom',
'sys_type': sys_type,
'due_taka_track': due_taka_track,
'total_paid_taka': total_paid_taka,
'payment_message': payment_message,
'time_now': time_now,
'unpaid_taka': unpaid_taka,
'payment_message': payment_message,
'remain_taka': remain_taka,
'sum_cost_taka': sum_cost_taka,
'remain_msg': remain_msg}
html_string = render_to_string('shop/pdf_invoice.html', context).encode(encoding="UTF-8")
response = HttpResponse(content_type='application/pdf')
response['Content-Disposition'] = 'inline; filename=invoice' + \
str(customers.id)+customers.customer_uid + customers.customer_name + '.pdf'
HTML(string=html_string).write_pdf(response)
return response
and this is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-16">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>invoice copy {% if customers.customer_name %}Customer Name:{{customers.customer_name}}{% else %}
Name: দেওয়া হয়নি{% endif %} | {{customers.customer_uid}}</title>
<head>
<style>
#import url('https://fonts.maateen.me/siyam-rupali/font.css');
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
}
p,th,td,th,tr{
font-size:10px;line-height:12px
font-family: 'SiyamRupali', sans-serif;
}
.border_sx {
border-style: solid;
border-width: 1px;
padding: 5px;
border-radius: 5px;
display:block;
width: 100%;
margin-right:-100px;
padding: 10px;
}
#background{
position:absolute;
z-index:0;
background:white;
display:block;
min-height:50%;
min-width:50%;
color:yellow;
}
#content{
position:absolute;
z-index:0.1;
}
#bg-text
{
color:lightgrey;
font-size:70px;
margin-top: 160px;
margin-right: 40px;
transform:rotate(320deg);
-webkit-transform:rotate(300deg);
}
#bg-text-one
{
color:lightgrey;
font-size:20px;
line-height: 25px;
margin-right: 100px;
margin-bottom: 800px;
margin-top: -10px;
transform:rotate(320deg);
-webkit-transform:rotate(300deg);
}
#fix_font
{
font-size: 13.5px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
}
</style>
</head>
<body>
<div id="background">
<p id="bg-text">Moon Telecom</p>
<p id="bg-text-one">Fulhata Bazar জাহাঙ্গীর সুপার মার্কেট, ব্রীজ রোড, ফুলহাতা বাজার, মোডেলগঞ্জ। 01717-051200(সুকান্ত বসু) 01828-163858(দোকান)</p>
</div>
<div id="content" class="border_sx">
<div class="invoice_intro">
<div class="site_title" style="text-align:center; margin:0 auto">
<h1 style="font-size:10px;line-height:12px">ওঁ</h1>
<p style="font-size:8px;line-height:10px">মা কালী সহায়</p>
<h2 style="font-size:19px;line-height:13px;">মুন টেলিকম</h2>
<div class="invoice_info_one" style="width:70%;margin:0 auto; text-align:center">
<p style=";">সকল প্রকার মোবাইল সেট, সীম কার্ড, মেমোরী কার্ড, MP-3, সোলার চার্জার, সোলার ফ্যান, মোবাইল ফোনের ব্যাটারী, চার্জার,
ক্যাচিং,কাভার,হেডফোন, রেবন, ডিসপ্লে এবং ইলেট্রিক মালামাল বিক্রেতা</p>
</div>
<div class="invoice_location">
<p>জাহাঙ্গীর সুপার মার্কেট, ব্রীজ রোড, ফুলহাতা বাজার, মোডেলগঞ্জ।</p>
</div>
<div class="invoice_contact">
<p>01717-051200(সুকান্ত বসু) 01828-163858(দোকান)
<b>Email:</b> moontelecom2008#gmail.com</p>
</div>
<hr>
</div>
</div>
<div class="customer_part" style="width:40%;margin:0px left;display:block">
<div class="customer_info">
{% if customers.customer_name %}
<p style="font-size:">Customer Name:
<b> {{customers.customer_name}}</b>
</p>
{% else %}
<p> Name: দেওয়া হয়নি</p> {% endif %}
<p style="font-size:x">Phone Number: {% if customers.customer_mobile_no %} {{customers.customer_mobile_no}} {% else %} No Mobile Number
{% endif%}
</p>
<p style="font-size:">Purchase Time: {{customers.customer_sell_date}}</p>
<p style="font-size:">invoice id:
<b>{{customers.customer_uid}}</b>
</p>
<p>{{customers.product_warrenty}}</p>
</div>
</div>
<div class="">
<table style="border-style: solid;border-width: 0px;">
<tr>
<th>Product Name</th>
<th colspan="">Price</th>
<th>Product Price (MRP)</th>
<th>ID or IME</th>
<th>Warrenty</th>
<th>QN</th>
</tr>
<tr>
<td>
<b>{{customers.customer_product_name}}</b>
</td>
<td>
<b>Customer Price: {{customers.customer_price}}</b> TK
<i>{% if customers.customer_discount_taka %}
( Discount added {{customers.customer_discount_taka}} TK )
{% else%}
{%endif%}</i>
</td>
<td>{{customers.customer_product_mrp}} Taka * {{customers.customer_product_quantity}} (QN) </td>
<td>{{customers.customer_product_id}}</td>
<td>
{% if customers.customer_product_warrenty %} {{customers.customer_product_warrenty}} Months {% else %} No {% endif %}
</td>
<td>{{customers.customer_product_quantity}}</td>
</tr>
<th>
First Time Payment
</th>
<th>
{{customers.customer_first_time_payment}} TK
<span style="color:red">{{customers.customer_first_due_info}}</span>
</th>
<td>
{{customers.customer_sell_date}}
</td>
{% if due_taka_track %}
<tr>
<th>SL</th>
<th>Taka</th>
<th>Paid Date</th>
<th>Due Info</th>
</tr>
<hr> {% for track in due_taka_track %}
<tr>
<td>{{forloop.counter}}</td>
<td>
<i>{{track.customer_due}}</i> TK</td>
<td>{{track.customer_due_date}}</td>
<td>{{track.customer_due_info}}</td>
</tr>
{% endfor %} {% else %} {% endif %} {% if sum_cost_taka %}
<tr>
<td>Total Due Complete </td>
<th>{{sum_cost_taka}} TK</th>
</tr>
{% else %} {% endif %}
<tr>
<td>
<b>Total Paid</b>
</td>
<th>
{% if payment_message %}
{{customers.customer_due_taka_info}} TK
<span style="color:red">{{payment_message}}</span>
<br>
<button type="button" class="btn btn-danger">{{remain_msg}} {{remain_taka}}TK</button>
{%else %} {{customers.customer_due_taka_info}} TK
<button type="button" class="btn btn-success">Payment Completed</button>
{% endif %}
</th>
</tr>
</table>
<table border="none!important" style="margin-top:10px;border:none!important">
<tr>
<th style="text-align:left">Customer signature</th>
<th style="text-align:right">Authorized signature</th>
</tr>
</table>
</div>
<div class="customer_notifications">
<div class="container">
<div class="row">
<div class="col-lg-12">
{% if customers.customer_conditions %}
<div class="warning">
<p>
<i>{{customers.customer_product_name}} {{customers.customer_conditions}}</i>
</p>
</div>
{% else %} {% endif %}
<div class="col-lg-12">
<div class="footer_info">
<p id="fix_font"><b>বিঃদ্রঃ ডেলিভারির সময় মাল বুঝিয়া নিবেন। পরে কোন আপত্তী গ্রহনযোগ্য নয়। (বিক্রিত মাল ফেরত হয় না) </h6>
<p>Print date: {{time_now}}</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="display:block">
<div class="footer_info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="footer_info">
<div class="copy_right">
{% if site_credit %}
<p>{{site_credit}}</p>
{% else %} {% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I changed UTF-8/UTF but this issue did not fix.

I installed(Kalpurush) font on my PC. Then I added that font write_pdf variable.
HTML(string=html_string).write_pdf(response,stylesheets=[CSS(string='body,p,h1,h2,h3,h4,h5,tr,td { font-family: Kalpurush !important }')])