I want to generate a PDF with a specific background from three simple input-fields.
A title, a message and a signature as shown in the picture below.
Example of desired result
I have some experience with creating web-sites with Python Flask, but I struggle with how to tackle this challenge.
create a h1 containing the title, a h2 containing the message and a bottom text with some css
.bottom{
position:fixed;
bottom:0;
}
put the background-image tag on the body to have your own custom image
it would be something like this
<html>
<head>
<style>
.bottom{
position:fixed;
bottom:0;
}
</style>
</head>
<body style="background-image:url('mypicture.png'); text-align: center">
<h1>my title</h1>
<h2>my subtitle</h2>
<h2 class="bottom">bottom text</h2>
</body>
</html>
Related
I’m learning py-script where you can use <py-script></py-script> in an HTML5 file to write Python Code. As a python coder, I would like to try web development while still using python, so it would be helpful if we could output and input information using py-script.
For example, could someone explain how to get this function to work:
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div>Type an sample input here</div>
<input id = “test_input”></input>
<-- How would you get this button to display the text you typed into the input into the div with the id, “test”--!>
<button id = “submit-button” onClick = “py-script-function”>
<div id = “test”></div>
<div
<py-script>
<py-script>
</body>
</html
I would appreciate it and I hope this will also help the other py-script users.
I checked source code on GitHub and found folder examples.
Using files todo.html and todo.py I created this index.html
(which I tested using local server python -m http.server)
Some elements I figured out because I have some experience with JavaScript and CSS - so it could be good to learn JavaScript and CSS to work with HTML elements.
index.html
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />-->
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div>Type an sample input here</div>
<input type="text" id="test-input"/>
<button id="submit-button" type="submit" pys-onClick="my_function">OK</button>
<div id="test-output"></div>
<py-script>
from js import console
def my_function(*args, **kwargs):
#print('args:', args)
#print('kwargs:', kwargs)
console.log(f'args: {args}')
console.log(f'kwargs: {kwargs}')
text = Element('test-input').element.value
#print('text:', text)
console.log(f'text: {text}')
Element('test-output').element.innerText = text
</py-script>
</body>
</html>
Here screenshot with JavaScript console in DevTool in Firefox.
It needed longer time to load all modules
(from Create pyodine runtime to Collecting nodes...)
Next you can see outputs from console.log().
You may also use print() but it shows text with extra error writing to undefined ....
An alternative to way to display the output would be to replace the
Element('test-output').element.innerText = text
by
pyscript.write('test-output', text)
I have HTML file like this:
<HTML>
<HEAD>
<style>
.secret {
background-color: black;
color: black;
}
</style>
</HEAD>
<BODY>
<p>This text is VISIBLE</p>
<p id="hidden-1" style="color: white;">This text is hidden (white text background)</p>
<p id="hidden-2" class="secret">This text is hidden (black text/background)</p>
</BODY>
<HTML>
I want to write a small Python application that get HTML file as an input and detects the HTML element that makes this trick. In the case above, the output should be "hidden-1" + "hidden-2".
Additional to the example above, there are many more options to hide text in HTML. I'm looking for a solution that has the highest rate of success.
Is this possible?
Thanks
A general solution could be to use bs4 to strip all the ids / text from the html. Then use imgkit to convert the .html to .png, and read the visible text from it with an OCR such as pytesseract, then do a diff to find the "hidden" text.
I need to extract the css codes from serveral HTML files but I can't figure out how to solve the follwing two problems:
A HTML file might have more than one block containing CSS code.
In HTML CSS is placed inside tags. But so is other code. I only need the code coming from <style type="text/css">.
I looked into beautifulsoup but haven't yet been able to figure out if this is possible using this library or if I need to write something myself.
Hopefully anyone on here can help me out.
from bs4 import BeautifulSoup
soup = BeautifulSoup(html_code,'html.parser')
soup.find('style',{"type" : "text/css"})
I've tried this code on the below html code
<html>
<head>
<style type="text/css">
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph1.</p>
<h4>This is a paragraph2.</h4>
<style>
h4 {color: red;}
</style>
And this was the output i got -
Output
<style type="text/css">
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
You can see that i got only the style tag which has type="text/css"
I have been trying to style bokeh widgets with a css file in flask that I modified from the gapminder demo. In particular, I am currently trying to style the dropdown, tab and slider widgets without much progress. I was able to style the tooltips using the gapminder css example, but would ultimately like to know if there are other examples or, even better, a listing of all of the bokeh style options (i.e. .bk-... styles). I'm not sure if this should work properly, as I'm still learning web dev, by my current index.html file in flask looks like:
<html>
<head>
<link
href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.css"
rel="stylesheet" type="text/css">
<link
href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.1.min.css"
rel="stylesheet" type="text/css">
<link
rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/gapminder.css') }}">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.1.min.js"></script>
{{ script | safe }}
</head>
<body>
<div class=page>
{{ div | safe }}
</div>
</body>
</html>
Thanks in advance for the help.
Not sure if you are still searching for a response, but here is what I have done to adress this issue.
<style>
{% include 'styles.css' %}
.bk-root .bk-toolbar-right .bk-button-bar-list .bk-toolbar-button:hover .bk-tip {
color: #5DADE2;
}
.bk-root .bk-slider-parent input[type="text"]{
color: #FDFEFE;
}
</style>
It is quite manual, in that I first generated the bokeh plots, inspected the widget elements i wanted to change then simply added this into the index.html file. If you want to see which attributes you can edit, just inspect them and you will see them there.
For this example i changed the color of the tool names when you hover on them and also the slider value color.
I also had a seperate .css file which i included, so you could move it all in there.
When using chameleon, I can replace element from a base template using the concept of slot. Where you define a slot and fill it using another tag. As there is no container element in head, how can one add elements to head ? :
The Layout file
<html>
<head>
<div metal:define-slot="extra_head"></div>
</head>
<body>
...
</body>
</html>
The content template that need to specify extra head.
<html metal:use-macro="load: main.pt">
<div metal:fill-slot="extra_head">
<script type="text/javascript" src="http://example/script.js"></script>
</div>
...
</html>
This gets rendered in :
<html>
<head>
<div metal:fill-slot="extra_head">
<script type="text/javascript" src="http://example/script.js"></script>
</div>
</head>
<body>
...
</body>
</html>
But there's no container tag in head so how can one define a slot to add stuff in the head ?
There's an alternative to using tal:omit-tag (which I'm finding annoyingly confusing - more than once I spent many minutes trying to figure out why a certain tag does not appear in the output when it's clearly present in the template, only to find tal:omit-tag neatly tucked in the far corner): if you use xml tags with tal: and metal: namespaces they won't appear in the output:
<html>
<head>
<metal:my-slot define-slot="extra_head"></metal:my-slot>
</head>
<body>
...
</body>
</html>
and in the child template:
<metal:template use-macro="load: main.pt">
<metal:any-descriptive-name fill-slot="extra_head">
<script type="text/javascript" src="http://example/script.js"></script>
</metal:any-descriptive-name>
...
</metal:template>
Note how the template becomes much more readable and self-descriptive and does not contain weird things such as a <div> inside <head> :)
You also can omit tal: and metal: prefixes on attributes when using namespaced tags, so
<h1 tal:condition="..." tal:content="..." tal:omit-tag="">Hi there! Bogus content for added confusion!</h1>
becomes
<tal:greeting condition="..." content="..." />
To remove the tag one has to use tal:omit-tag :
In the content template, use :
<html metal:use-macro="load: main.pt">
<div metal:fill-slot="extra_head" tal:omit-tag="">
<script type="text/javascript" src="http://example/script.js"></script>
</div>
...
</html>
The div is not part of the result. Read the doc.