Update:
I just discovered this inside the postfix configuration documents. Any ideas on how I could include my graphic in this message and not encounter the character limit issue would be great.
I've written a Python-based milter for postfix that extracts attachments and replaces them with an HTML file with links to where those attachments are. For "branding" purposes (so that my users don't think they're being spammed), I've embedded a base64 encoded image into the CSS portion of this HTML file.
When I run tests and just output the HTML file to my filesystem (rather than e-mail it) and open it in a web browser, the graphic appears with no issue. When the message is actually sent through postfix with the HTML attachment, the long base64 portion is split over many lines rather than one continuous line as it is supposed to be.
This is what the HTML file SHOULD look like when received:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type content=" text="" html;="" charset="ISO-8859-1"" />
<style type="text/css" media="screen">
#logo {
background-color: #ffffff;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: 1;
font-size-adjust: none;
font-stretch: normal;
}
#logo {
padding: 1em;
}
#logo h1, #logo h2 {
margin: 0;
}
#logo h1 {
height: 100px;
}
#logo h1 span {
float: left;
height: 100%;
}
#logo h1 #EARS {
# background: transparent url(images/WRTgreendot.jpg) no-repeat scroll left top;
background: transparent url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QSqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49J++7vycgaWQ9J1c1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCc/Pgo8eDp4bXBtZXRhIHhtbG5zOng9J2Fkb2JlOm5zOm1ldGEvJz4KPHJkZjpSREYgeG1sbnM6cmRmPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjJz4KCiA8cmRmOkRlc2NyaXB0aW9uIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOmZvcm1hdD5pbWFnZS9qcGVnPC9kYzpmb3JtYXQ+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpDcmVhdG9yVG9vbD5JbGx1c3RyYXRvcjwveG1wOkNyZWF0b3JUb29sPgogIDx4bXA6Q3JlYXRlRGF0ZT4yMDA3LTEyLTIxVDEzOjU2OjI2LTA1OjAwPC94bXA6Q3JlYXRlRGF0ZT4KICA8eG1wOk1vZGlmeURhdGU+MjAwNy0xMi0yMVQxODo1Njo0NVo8L3htcDpNb2RpZnlEYXRlPgogIDx4bXA6TWV0YWRhdGFEYXRlPjIwMDctMTItMjFUMTM6NTY6MjYtMDU6MDA8L3htcDpNZXRhZGF0YURhdGU+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHhtbG5zOnhtcE1NPSdodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vJz4KICA8eG1wTU06RG9jdW1lbnRJRCByZGY6cmVzb3VyY2U9J3V1aWQ6NUFDQTZFNkVGNkFGREMxMThERDBGNEI0RUVBODk1NzUnIC8+CiAgPHhtcE1NOkluc3RhbmNlSUQ+dXVpZDo1QkNBNkU2RUY2QUZEQzExOEREMEY0QjRFRUE4OTU3NTwveG1wTU06SW5zdGFuY2VJRD4KICA8eG1wTU06RGVyaXZlZEZyb20gcmRmOnBhcnNlVHlwZT0nUmVz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) no-repeat scroll left top;
width: 100px;
text-indent: -1000em;
height: 100px;
text-transform: uppercase;
color: #3366ff;
font-size: 100px;
}
#logo h1 #WRT {
# background: transparent url(images/WRTgreendot.jpg) no-repeat scroll left top;
width: 100px;
height: 100px;
text-indent: -1000em;
font-size: 100px;
text-transform: uppercase;
color: #cc0000;
}
#EARS_desc {
text-align: left;
font-family: Arial,Helvetica,sans-serif;
font-weight: normal;
}
#EARS_files {
text-align: left;
font-weight: bold;
font-family: "Courier New",Courier,monospace;
font-size: 14pt;
}
</style>
<title>EARS</title>
</head>
<body>
<div id="logo">
<h1><span id="WRT">WRT</span>
<span id="EARS"> EARS</span>
</h1>
<h2>E-mail Attachment Retrieval System</h2>
</div>
<hr>
<div id="EARS_desc">
You have been sent an e-mail that exceeds WRT's allowed e-mail attachment size.<p>
Attachments to this message have been removed and saved to a <b>TEMPORARY</b> storage location<br>
where they will be <b>PERMANENTLY REMOVED</b> after 30 days.<p>
To retrieve the attachments, right-click on the filename listed below and choose <b>Save As...</b>
</div>
<hr>
<div id="EARS_files">
<ul>
<li> file1
<li> file2
</ul>
</div>
</body></html>
but this is what it is appearing as via e-mail:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type content=" text="" html;="" charset="ISO-8859-1"" />
<style type="text/css" media="screen">
#logo {
background-color: #ffffff;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: 1;
font-size-adjust: none;
font-stretch: normal;
}
#logo {
padding: 1em;
}
#logo h1, #logo h2 {
margin: 0;
}
#logo h1 {
height: 100px;
}
#logo h1 span {
float: left;
height: 100%;
}
#logo h1 #EARS {
# background: transparent url(images/WRTgreendot.jpg) no-repeat scroll left top;
background: transparent url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QSqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49J++7vycgaWQ9J1c1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCc/Pgo8eDp4bXBtZXRhIHhtbG5zOng9J2Fkb2JlOm5zOm1ldGEvJz4KPHJkZjpSREYgeG1sbnM6cmRmPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjJz4KCiA8cmRmOkRlc2NyaXB0aW9uIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc+CiAgPGRjOmZvcm1hdD5pbWFnZS9qcGVnPC9kYzpmb3JtYXQ+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHhtbG5zOnhtcD0naHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpDcmVhdG9yVG9vbD5JbGx1c3RyYXRvcjwveG1wOkNyZWF0b3JUb29sPgogIDx4bXA6Q3JlYXRlRGF0ZT4yMDA3LTEyLTIxVDEzOjU2OjI2LTA1OjAwPC94bXA6Q3JlYXRlRGF0ZT4KICA8eG1wOk1vZGlmeURhdGU+MjAwNy0xMi0yMVQxODo1Njo0NVo8L3htcDpNb2RpZnlEYXRlPgogIDx4bXA6TWV0YWRhdGFEYXRlPjIwMDctMTItMjFUMTM6NTY6MjYtMDU6MDA8L3htcDpNZXRhZGF0YURhdGU+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHhtbG5zOnhtcE1NPSdodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
bW0vJz4KICA8eG1wTU06RG9jdW1lbnRJRCByZGY6cmVzb3VyY2U9J3V1aWQ6NUFDQTZFNkVGNkFGREMxMThERDBGNEI0RUVBODk1NzUnIC8+CiAgPHhtcE1NOkluc3RhbmNlSUQ+dXVpZDo1QkNBNkU2RUY2QUZEQzExOEREMEY0QjRFRUE4OTU3NTwveG1wTU06SW5zdGFuY2VJRD4KICA8eG1wTU06RGVyaXZlZEZyb20gcmRmOnBhcnNlVHlwZT0nUmVzb3VyY2UnCiAgIHhtbG5zOnN0UmVmPSdodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjJz4KICAgPHN0UmVmOmluc3RhbmNlSUQ+dXVpZDo5ODY2NUZDMUZCNzBEQzExQjJFN0FFRjg0RTUxRTk3Qzwvc3RSZWY6aW5zdGFuY2VJRD4KICAgPHN0UmVmOmRvY3VtZW50SUQ+dXVpZDo5NzY2NUZDMUZCNzBEQzExQjJFN0FFRjg0RTUxRTk3Qzwvc3RSZWY6ZG9jdW1lbnRJRD4KICA8L3htcE1NOkRlcml2ZWRGcm9tPgogPC9yZGY6RGVzY3JpcHRpb24+Cgo8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSdyJz8+Cv/bAEMABQMEBAQDBQQEBAUFBQYHDAgHBwcHDwsLCQwRDxISEQ8RERMWHBcTFBoVEREYIRgaHR0fHx8TFyIkIh4kHB4fHv/bAEMBBQUFBwYHDggIDh4UERQeHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHv/AABEIAGQAZAMBIgACEQEDEQH/xAAcAAEBAAIDAQEAAAAAAAAAAAAABgUHAgMEAQj/xAA8EAABAwMBAwgHBwMFAAAAAAABAAIDBAURBhIhMRMiQVFhocHRF
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) no-repeat scroll left top;
width: 100px;
text-indent: -1000em;
height: 100px;
text-transform: uppercase;
color: #3366ff;
font-size: 100px;
}
#logo h1 #WRT {
# background: transparent url(images/WRTgreendot.jpg) no-repeat scroll left top;
width: 100px;
height: 100px;
text-indent: -1000em;
font-size: 100px;
text-transform: uppercase;
color: #cc0000;
}
#EARS_desc {
text-align: left;
font-family: Arial,Helvetica,sans-serif;
font-weight: normal;
}
#EARS_files {
text-align: left;
font-weight: bold;
font-family: "Courier New",Courier,monospace;
font-size: 14pt;
}
</style>
<title>EARS</title>
</head>
<body>
<div id="logo">
<h1><span id="WRT">WRT</span>
<span id="EARS"> EARS</span>
</h1>
<h2>E-mail Attachment Retrieval System</h2>
</div>
<hr>
<div id="EARS_desc">
You have been sent an e-mail that exceeds WRT's allowed e-mail attachment size.<p>
Attachments to this message have been removed and saved to a <b>TEMPORARY</b> storage location<br>
where they will be <b>PERMANENTLY REMOVED</b> after 30 days.<p>
To retrieve the attachments, right-click on the filename listed below and choose <b>Save As...</b>
</div>
<hr>
<div id="EARS_files">
<ul>
<li> Lorem Ipsum - All the facts - Lipsum generator.html
</ul>
</div>
</body></html>
As you should be able to see, the base64
text has been split over multiple lines which, in turn, does not allow for the graphic(s) to be displayed.
Related
I am trying to create a webapp where, the data comes from a certain API and is saved into the database. Now, I want to create a pdf using the data. I had my html Code ready with custom css and bootstrap ( using display: flex; ). I already tried using the xhtml2pdf, reportlab libraries but am not able to get it right with CSS flex properties.
The source for the HTML, and some python file are attached below.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Invoice-ID</title>
<style type="text/css">
/* Bootstrap CSS */
.col-md-7 {
flex: 0 0 auto;
width: 58%;
}
.container {
width: 1320px;
}
.bg-light {
background-color: #f8f9fa !important;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.justify-content-center {
justify-content: center;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: .5rem;
padding-bottom: .5rem;
}
.navbar>.container-fluid {
display: flex;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
.navbar-light .navbar-brand {
color: rgba(0, 0, 0, .9);
}
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
text-decoration: none;
white-space: nowrap;
}
.flex-column {
flex-direction: column !important;
}
.d-flex {
display: flex !important;
}
.w-50 {
width: 50% !important;
}
.ms-2 {
margin-left: .5rem !important;
}
.p-3 {
padding: 1rem !important;
}
/* Custom CSS */
body {
font-weight: 300;
font-size: 14px;
}
.wrapper {
border: 2px solid gray;
border-width: 2px;
}
#location {
/* border: 2px solid gray; */
border-right: 1px solid gray;
border-width: 1px;
margin-bottom: 2rem;
}
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
padding: 10px 20px 0px 20px;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: left !important;
}
/* . {
margin-left: 455px;
} */
.hritem {
border: 1px solid gray;
border-width: 2px;
}
</style>
</head>
<body>
<div class="mt-5 container" style="border: 2px solid gray;">
<!-- Header Start -->
<div class="d-flex justify-content-center align-items-center">
<!-- <img src="E:\Python\Django web\logiswift\Deployment\main\static\assets\logo.png" alt="Logo" width="350px"> -->
<h1>LOGO</h1>
<div class="ms-auto">
<span><b>Some Text</b></span>
</div>
</div>
<hr class="hritem"/>
<div class="d-flex justify-content-center align-items-center">
<h3>Title</h3>
<div class="ms-auto ">
<p>Date: 12-12-2021</p>
<p>Document ID: 9868</p>
</div>
</div>
<!-- Header End -->
<hr class="hritem"/>
<!-- General Trip Info Start -->
<div class="d-flex">
<div class="w-50" id="location">
<p>
<h6>Current Location</h6>
<span>Address Line 1,</span>
<span>Address Line 2,</span>
<span>City,</span>
<span>State - PIN</span>
</p>
<p>
<h6>Expected Location</h6>
<span>Address Line 1,</span>
<span>Address Line 2,</span>
<span>City,</span>
<span>State - PIN</span>
</p>
</div>
<div class="w-50 ms-2 mt-3" id="consumer">
<h6>consumer Details</h6>
<hr/>
<p>
<span style="font-size: medium; font-weight: 400;"><b>Name: </b></span>
<span>Your Name</span>
</p>
<p>
<span style="font-size: medium; font-weight: 400;"><b>Consumer ID: </b></span>
<span>Unique Consumer ID</span>
</p>
</div>
</div>
<!-- General Trip Info End -->
<hr class="hritem"/>
<!-- Bill Start -->
<!-- <div>
<p>Bill Will Come here</p>
</div> -->
<!-- Bill End -->
<!-- <hr class="hritem"/> -->
<!-- Footer Start -->
<!-- <div>
<p>Additional info like address of the company and seal comes here.</p>
</div> -->
<!-- Footer end -->
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
utils.py
from io import BytesIO
from django.http import HttpResponse
from django.template.loader import get_template
from xhtml2pdf import pisa
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
view.py
def generatePDF(request):
template = get_template('main/invoices.html')
context = {
"date": datetime.date.today(),
}
html = template.render(context)
pdf = render_to_pdf('main/invoices.html', context)
return HttpResponse(pdf, content_type="application/pdf")
I don't understand why the above code isn't rendering the CSS flex attributes. I even tried to use the bootstrap classes inside the style tag, but the CSS flex won't come on rendering the PDF.
Please help me out.
Thanks in advance
Hi I've been trying to learn how to build an ecommerce site and am getting stuck with the Django Stripe integration for a custom pay flow. I can get the pre built checkout to work but can't for custom pay flow.
Stripe seems to have updated the code on their docs a few months ago so when I try to look up tutorials, they all don't seem to have the same code and I can't seem to figure out how to get it to work. I'm self taught and just a beginner/intermediate maybe so might be missing something obvious.
I'm using the code from this page https://stripe.com/docs/payments/integration-builder and trying to convert it into Django.
This is my views.py
from django.shortcuts import render
import stripe
from django.http import JsonResponse
import json
# Create your views here.
from django.views import View
stripe.api_key = "xxxxxxxxx"
class StripeIntentView(View):
def post(self, request, *args, **kwargs):
try:
intent = stripe.PaymentIntent.create(
amount=2000,
currency='usd'
)
return JsonResponse({
'clientSecret': intent['client_secret']
})
except Exception as e:
return JsonResponse({'error':str(e)})
def payment_method_view(request):
return render(request, 'custom-landing.html')
This is my urls.py
from django.contrib import admin
from django.urls import path
from products.views import payment_method_view,StripeIntentView
urlpatterns = [
path('admin/', admin.site.urls),
path('custom-landing/', payment_method_view, name='custom-landing-page'),
path('create-payment-intent/', StripeIntentView.as_view(), name='create-payment-intent'),
]
This is my Landing-page.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Accept a card payment</title>
<meta name="description" content="A demo of a card payment on Stripe" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="global.css" />
<script src="https://js.stripe.com/v3/"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
<script src='{% static "js/client.js" %}'></script>
<style>
/* Variables */
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
display: flex;
justify-content: center;
align-content: center;
height: 100vh;
width: 100vw;
}
form {
width: 30vw;
min-width: 500px;
align-self: center;
box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
border-radius: 7px;
padding: 40px;
}
input {
border-radius: 6px;
margin-bottom: 6px;
padding: 12px;
border: 1px solid rgba(50, 50, 93, 0.1);
height: 44px;
font-size: 16px;
width: 100%;
background: white;
}
.result-message {
line-height: 22px;
font-size: 16px;
}
.result-message a {
color: rgb(89, 111, 214);
font-weight: 600;
text-decoration: none;
}
.hidden {
display: none;
}
#card-error {
color: rgb(105, 115, 134);
text-align: left;
font-size: 13px;
line-height: 17px;
margin-top: 12px;
}
#card-element {
border-radius: 4px 4px 0 0;
padding: 12px;
border: 1px solid rgba(50, 50, 93, 0.1);
height: 44px;
width: 100%;
background: white;
}
#payment-request-button {
margin-bottom: 32px;
}
/* Buttons and links */
button {
background: #5469d4;
color: #ffffff;
font-family: Arial, sans-serif;
border-radius: 0 0 4px 4px;
border: 0;
padding: 12px 16px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: block;
transition: all 0.2s ease;
box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
width: 100%;
}
button:hover {
filter: contrast(115%);
}
button:disabled {
opacity: 0.5;
cursor: default;
}
/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
border-radius: 50%;
}
.spinner {
color: #ffffff;
font-size: 22px;
text-indent: -99999px;
margin: 0px auto;
position: relative;
width: 20px;
height: 20px;
box-shadow: inset 0 0 0 2px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.spinner:before,
.spinner:after {
position: absolute;
content: "";
}
.spinner:before {
width: 10.4px;
height: 20.4px;
background: #5469d4;
border-radius: 20.4px 0 0 20.4px;
top: -0.2px;
left: -0.2px;
-webkit-transform-origin: 10.4px 10.2px;
transform-origin: 10.4px 10.2px;
-webkit-animation: loading 2s infinite ease 1.5s;
animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
width: 10.4px;
height: 10.2px;
background: #5469d4;
border-radius: 0 10.2px 10.2px 0;
top: -0.1px;
left: 10.2px;
-webkit-transform-origin: 0px 10.2px;
transform-origin: 0px 10.2px;
-webkit-animation: loading 2s infinite ease;
animation: loading 2s infinite ease;
}
#-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#media only screen and (max-width: 600px) {
form {
width: 80vw;
}
}
</style>
</head>
<body>
<!-- Display a payment form -->
<form id="payment-form">
<div id="card-element"><!--Stripe.js injects the Card Element--></div>
<button id="submit">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay now</span>
</button>
<p id="card-error" role="alert"></p>
<p class="result-message hidden">
Payment succeeded, see the result in your
Stripe dashboard. Refresh the page to pay again.
</p>
</form>
</body>
</html>
This is what shows up on my http://127.0.0.1:8000/custom-landing/
I'm not sure why but the card elements aren't showing up.
I've only changed the python code. The javascript, html and CSS code are the same as on the Stripe docs.
Any idea on how I can get the card element to load?
And any feedback on whether the the django code is views is much appreciated.
Thanks
edit: This is the code that shows in my browser console.
line 10 of the client.js is
document.querySelector("button").disabled = true;
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 2 years ago.
I am making a 404 error page, I have made an HTML file and An CSS file but it's not working. The file is in same directory, Can anyone Help Me? Please. Thanks
I am trying this for days, no fixes. Thanks ! Any help is appreciated.
Below You can see code.
My Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Awesome 404 Error Page Design - Vikas Kukreti</title>
<meta name="keywords" content="404, error, 404 error, 404 error page design, design, html, css, Vikas, Vikas kukreti" />
<meta name="description" content="Awesome 404 error page design for 404 errors including cool looks and animations with HTML and CSS only. Developed with love ❤ by Vikas Kukreti" />
</head>
<body>
<div id="particles" class="particles">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<main>
<section>
<h1>Page Not Found!</h1>
<div>
<span>4</span>
<span class="circle">0</span>
<span>4</span>
</div>
<p>We are unable to find the page.<br>you're looking for.</p>
<div>
<button>Back to mHome Page</button>
</div>
</section>
</main>
</body>
</html>
My CSS Code:
* {
padding: 0;
margin: 0;
}
body {
background: radial-gradient( circle, rgb(28, 27, 90) 0%, rgb(15, 18, 44) 30%, rgb(15, 13, 31) 100%);
height: 100vh;
color: #efefef;
}
.particles {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.particles span {
position: absolute;
top: 10%;
left: 10%;
display: block;
content: '';
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.6);
border-radius: 0.5rem;
filter: blur(5px);
}
.particles span:nth-child(2) {
top: 15%;
left: 70%;
filter: blur(3px);
}
.particles span:nth-child(3) {
top: 70%;
left: 40%;
filter: blur(5px);
}
.particles span:nth-child(4) {
top: 52%;
left: 20%;
filter: blur(4px);
}
.particles span:nth-child(5) {
top: 74%;
left: 90%;
filter: blur(5px);
}
.particles span:nth-child(6) {
top: 85%;
left: 10%;
filter: blur(7px);
}
.particles span:nth-child(7) {
top: 67%;
left: 79%;
filter: blur(3px);
}
.particles span:nth-child(8) {
top: 48%;
left: 40%;
filter: blur(4px);
}
.particles span:nth-child(9) {
top: 45%;
left: 30%;
filter: blur(5px);
}
.particles span:nth-child(10) {
top: 96%;
left: 29%;
filter: blur(4px);
}
.particles span:nth-child(11) {
top: 55%;
left: 89%;
filter: blur(6px);
}
.particles span:nth-child(12) {
top: 55%;
left: 60%;
filter: blur(7px);
}
main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: cursive;
}
main h1{
font-weight: normal;
}
main h1 {
text-align: center;
text-shadow: 0 0 5px #c3d168a2;
}
main div {
margin-top: 2rem;
text-align: center;
}
main div span{
font-size: 5rem;
line-height: 6rem;
text-shadow: 0 0 7px #c3d168a2;
}
.circle {
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
display: inline-block;
position: relative;
width: 6rem;
height: 6rem;
text-shadow: none;
background: #e6f1a3 radial-gradient(#f9ffd2, #ecff70);
color: rgba(0, 0, 0, 0);
border-radius: 50%;
box-shadow: 0 0 7px #e7f1a3a2;
}
.circle:after {
display: block;
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 10rem;
height: 4rem;
border-radius: 50%;
border: 2px solid #fafafa;
border-top: 0px solid #fafafa;
border-bottom: 4px solid #fafafa;
z-index: 2
}
.circle:before {
display: block;
position: absolute;
content: '';
top: 50%;
left: 50%;
background: #124;
border-radius: 50%;
width: 4px;
height: 4px;
transform-origin: 2.5rem 0;
transform: translate(-2.5rem, 0) rotate(0deg);
animation: circle-around 5s infinite linear;
}
#keyframes circle-around {
0% { transform: translate(-2.5rem, 0) rotate(0deg); }
100% { transform: translate(-2.5rem, 0) rotate(360deg); }
}
main p {
margin-top: 3rem;
text-align: center;
text-shadow: 0 0 5px #c3d168a2;
}
main button {
padding: 0.55rem 1.2rem;
border: none;
outline: none;
appearance: none;
border-radius: 1rem;
background: rgb(17, 141, 44);
color: #fafafa;
box-shadow: 0 0 4px #e1f17859;
}
main button:hover {
cursor: pointer;
}
Please Help Why This Doesn't works?
I tested your code, It is working well. I recommend you trying a different browser or trying Ctrl + F5 in your browser to force an update.
try doing it like this ... try removing the "." in your href
Can you please also post any messages from your console. If you are using Chrome, then go to View -> Developer -> Developer Tools, the click on Console. If you are using a different browser, then see here how to open it: https://balsamiq.com/support/faqs/browserconsole/
Also, try loading your website in a different browser or in Incognito mode. Usually if CSS isn't being applied, it may have been cached so it is not updating for you.
I would make this a comment if I had enough reputation.
So I am at the last couple details of my portfolio website, and everything has gone relatively smoothly. I have not had an issue with images before, but this time I am using a {% for loop %} to iterate over the code for the card and I just have the variable template tags that create a new object every time I add something new in the django admin interface.
I feel like there is some small detail I am just completely missing, because I had it working at one point, but then decided to do the iteration instead of hard-coding it in, and it just won't show up. Another pair of eyes would be nice.
This is the section of my index.html:
{% block content %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jordan Miracle</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/portfolio/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<body>
<div class="jumbotron text-center ui-datepicker-next-hover" style="margin-bottom:0">
<div class="align-center">
<img src="{% static 'portfolio/mylogo.png' %}" id="img-bastet" class="img-fluid"
alt="Jordan and Bastet">
</div>
<h1><p style="font-family: 'Ubuntu Mono', Monospaced, monospace; font-size: medium;">Developer and Aspirant Data
Scientist</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="{% url 'home' %}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://github.com/jordanmiracle">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/jordanmiracle1">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/jordan-m-605b4b1a9/">LinkedIn</a>
</div>
<div class="topnav-right">
Blog
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<h2>About Me</h2>
<div class="row justify-content-center my-3">
<div class="col-5" style="border: #303030" aria-setsize="10px">
<img src="{% static 'portfolio/me-bastet-and-babys-turtle.jpg' %}" class="img-fluid"
alt="Jordan and Bastet">
</div>
</div>
<div class="intro-text">
<p style="font-family: 'Ubuntu Mono', Monospaced, monospace; font-size: small; ">
<p>I enjoy web development, and have a true love for analyzing data. Whether creating visualizations and
interpreting what I find,<br>
or creating a machine learning model to try and make predictions. <br>
Things that interest me the most are the climate and our ecosystem, consciousness, and the cosmos that we live
in.
</p>
</div>
<ul class="nav nav-pills flex-column">
<div class="button-row-main">
<button class="nav-button highlight-green">
<a href="mailto:jordanmiracle#protonmail.com" target="_blank">Contact
Me</a>
</button>
</div>
<div class="portfolio">
{% for project in projects %}
<div class="project">
<h2>{{ project.title }}</h2>
<p class="technologies">
</p>
<!-- Depending on availability, display either the image as a link,
only image, or a string explaining that the img is missing-->
{% if project.image %}
<a href="{{ project.url }}" target="_blank">
<div class="img-container" style="background-image: url('{{ project.image }}')"></div>
</a>
<p>{{ project.description }}
</p><br>
<div class="project-links">
Live Site
Code
</div>
{% endif %}
</div>
{% endfor %}
</body>
{% endblock %}
</html>
My style.css:
font-family: 'Oswald', sans-serif;
text-align: center;
background-color: #00FF00;
color: #303030;
}
/* ---------- HOME ---------- */
/* create color-hover-effect for M logo and buttons */
.highlight-orange:hover {
color: #417FD5;
border-color: #ffa000;
}
.highlight-green:hover {
color: darkred;
border-color: indianred;
}
button a {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-decoration: darkslateblue;
color: inherit;
/* increase the clickable area */
display: inline-block;
position: relative;
z-index: 1;
padding: 1.3em;
margin: -1.3em;
}
.nav-button {
font-size: 1.1em;
margin: 20px;
padding: 10px;
border: 2px solid #303030;
border-radius: 25px;
color: #303030;
background-color: #fdfdfd;
box-shadow: #417FD5;
}
.button-row-mobile,
.button-row-portfolio-mobile {
display: none;
}
/* ---------- PORTFOLIO ---------- */
.portfolio {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.project {
margin: 20px;
padding: 20px;
border: 3px solid #303030;
border-radius: 20px;
color: transparent;
background-color: transparent;
max-width: 300px;
}
.project-links {
display: flex;
justify-content: space-around;
}
.project-links a {
color: #4DAAE3;
}
.project-links a:visited {
color: #ffffff;
}
.project-links a:hover {
color: #4DAAE3;
}
.button-row-portfolio {
position: fixed;
width: 100%;
justify-content: space-between;
bottom: 5px;
}
.button-row-portfolio .nav-button {
opacity: 0.8;
}
/*
restrict img to uniform size automatically,
while showing the center portion of the screenshot. adapted from:
https://stackoverflow.com/questions/15866223/how-to-make-images-get-cut-off
*/
.img-container {
height: 200px;
width: 250px;
color: transparent;
background-position: center;
border: 1px solid #303030;
border-radius: 20px;
background-repeat: no-repeat;
}
/* ---------- FOOTER ---------- */
.separator {
display: none;
}
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
footer {
font-size: 16px;
color: #303030;
}
.site-footer {
padding-left: 40px;
padding-right: 40px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #aa2222;
color: white;
font-style: italic;
text-align: center;
}
.icon {
height: 36px;
width: auto;
padding: 8px;
}
.overflow {
color: #fdfdfd;
font-size: 2.5em;
}
/* ---------- RESPONSIVE ELEMENTS ---------- */
/* TODO: remove blue highlighting when buttons are clicked */
#media only screen and (max-width: 768px) {
.logo {
font-size: 14em;
}
.button-row-main,
.button-row-portfolio {
display: none;
}
.button-row-mobile {
margin-top: 50px;
margin-bottom: 50px;
display: flex;
justify-content: space-around;
}
.button-row-portfolio-mobile {
display: flex;
position: fixed;
width: 100%;
justify-content: space-around;
bottom: 5px;
}
.button-row-portfolio-mobile .nav-mobile {
opacity: 0.8;
}
.nav-mobile {
font-family: 'Oswald', sans-serif;
font-size: 1em;
border: none;
border-radius: 100px;
background-color: #fdfdfd;
}
.highlight-orange {
color: #4DAAE3;
border-color: #4DAAE3;
fill: #4DAAE3;
}
.highlight-green {
color: lightgreen;
border-color: lightgreen;
fill: lightgreen;
}
.highlight-blue {
color: lightblue;
border-color: lightblue;
fill: lightblue;
}
.separator {
display: block;
}
footer {
margin-top: 24px;
}
.icon {
height: 45px;
width: auto;
padding: 20px;
}
}
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: "Ubuntu Mono", serif;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 900px) {
.column {
width: 75%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
My models.py:
class Project(models.Model):
title = models.CharField(max_length=100)
description = models.CharField(max_length=120)
image = models.FilePathField(path='portfolio/images')
url = models.URLField(blank=True)
code_url = models.URLField(blank=True)
def __str__(self):
return self.title
Here is my file structure.
If anybody needs more information, or if I need to provide more details, just let me know. This is the last thing really standing in my way of deploying and it's been a pain.
Before changing it to img class
After changing it from a div class to img class
The images needed to be registered properly in the Django admin shell.
Once in the shell, I had to import the models.
from portfolio.models import Project
Then, p2 = Project.objects.get(id=2)
p2.image = <path_to_file>
And so on. Once they were registered in the DB, they popped up right away.
Looks like you might need to set a background image size on .img-container. If that doesn't work, also try setting display: block;
.img-container {
height: 200px;
width: 250px;
color: transparent;
background-position: center;
border: 1px solid #303030;
border-radius: 20px;
background-repeat: no-repeat;
background-size: cover;
display: block;
}
<?php
// $command=escapeshellcmd("D:\Wamp64\www\demo.py");
// $output=shell_exec($command);
// echo $output;
?>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"><title>File Arrangement Portal</title>
<style>
/* .div2 {
width: 400px;
background-color:black;
height: 100px;
padding: 250px;
border: 1px solid grey;
position:absolute;
left:50%;
top:60%;
transform:translate(-50%,-50%)
}
p2{
background-color: grey;
left:100px;
top:100px:
} */
.button1{
background-color: #4CAF50; /* Green */
position:absolute;
border: none;
color: white;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
top:195%;
left:30%
}
.button2{
background-color: #4CAF50; /* Green */
position:absolute;
border: none;
color: white;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
top:210%;
left:33%
}
.button3{
background-color: #4CAF50; /* Green */
position:absolute;
border: none;
color: white;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
top:210%;
left:32%
}
.button4{
background-color: #4CAF50; /* Green */
position:absolute;
border: none;
color: white;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
top:220%;
left:31%
}
.button5{
background-color: #4CAF50; /* Green */
position:absolute;
border: none;
color: white;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
top:190%;
left:31%
}
.button6{
background-color: #4CAF50; /* Green */
position:absolute;
border: none;
color: white;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
top:190%;
left:31%
}
.hello{
color:grey;
position:absolute;
top:0.5%;
left:32%;
}
.hello1{
color:grey;
position:absolute;
top:17%;
left:22%;
}
.hello2{
color:grey;
position:absolute;
top:34%;
left:32%;
}
.hello3{
color:grey;
position:absolute;
top:51%;
left:36%;
}
.hello4{
color:grey;
position:absolute;
top:67%;
left:35%;
}
.hello5{
color:grey;
position:absolute;
top:83%;
left:35%;
}
body {background-color: #5C5858;}
h1 {color: black;}
/* p {color: blue;} */
.rectangle {
height: 40px;
width: device-widthpx;
background-color: black;
}
</style></head>
<body>
<div class="rectangle"><h1 style="font-family:Times New Roman;text-align:center";><font color="white">File Arrangement Portal</font></h1></div>
<div style="position: absolute;top:63%; left: 50%;padding:260px;transform:translate(-50%,-50%);width: 450px; height: 100px; background: black; border: 1px solid black">
<h2 class='hello'>To Arrange the files and Run a Check<button class="button button1">Click Me!</button></h2>
<h2 class='hello1'>To Arrange the files from root folder and Run a check again<button class="button button2">Click Me!</button></h2>
<h2 class='hello2'>To Creation of PPT and ZIP File<button class="button button3">Click Me!</button></h2>
<h2 class='hello3'>To Copy the Files<button class="button button4">Click Me!</button></h2>
<h2 class='hello4'>To Paste the Files<button class="button button5">Click Me!</button></h2>
<h2 class='hello5'>Run a QC for Single File<button class="button button6">Click Me!</button></h2>
</div>
<!-- <h1>This is a Heading</h1> -->
<!-- <div class="div2"><p2 style="left:120px; top:100px";><font color="white">Click on one of the text labels to toggle the related control:</font></p2></div> -->
<script>
// console.log(<?php echo $output ?>);
</script>
</body>
</html>
I am just now started Learning HTML with online support i create this UI, I know this is poor but i want to know how can i improve with lesser code and improve the looks as well. And how can i replace the existing ui with better organised code.
I need help also like i want to trigger around 6 python code whenever user clicks respective six buttons.
Thanks in advance....
To run commands with PHP you should use escapeshellcmd("path to.py") and shell_exec() https://www.php.net/manual/en/function.escapeshellcmd.php
Just an example:
echo shell_exec(escapeshellcmd("path to.py"));
"echo .." outputs the result of the .py
In order to achieve this in few minutes you should wrap your buttons in a form (Use POST if you don't want show the parameters in the address bar) and give them a name="".
The action of the form can be empty, action="", so it will refresh the actual page.
Then at the top of the page you check if there's POST, with if($_POST){} and which button has been pressed, with if($_POST["name given to the button"]){}. This is just a raw example.
What you wanna achieve is quite advanced if you just started HTML so be aware! Good Luck.
Complete example:
<?php
if($_POST){
if($_POST["button1"]){
echo shell_exec(escapeshellcmd("path to.py"));
}
}
?>
<form action="" method="POST">
<button name="button1" class="button button1">Click Me!</button>
<form>