As you can see from the image there is a border around the text editor inside the QTabWidget.
I set the stylesheet like this:
tab.setStyleSheet("QTabWidget::pane { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab:selected { background-color: #349117; }")
If I set margin negative, it helps but then things look a bit out of place and also I don't want to hard code values that might only work on my system but not others.
Here is the code:
import os, sys
from PySide2 import QtGui, QtCore, QtWidgets, QtWebEngineWidgets, QtWebChannel
# monaco editor index html file
file = "./index.html"
tab = QtWidgets.QTabWidget()
bgcolor = tab.palette().color(QtGui.QPalette.Background)
editor = QtWebEngineWidgets.QWebEngineView()
editor.load(QtCore.QUrl.fromLocalFile(file))
tab.setStyleSheet("QTabWidget::pane { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab:selected { background-color: #349117; }")
tab.addTab(editor, "python1")
tab.show()
The border seems to come from the HTML page shown.
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="min-height: calc(100vh - 40px); margin: 0; padding: 0; box-sizing: border-box; border: 0px"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'python',
fontFamily:"Verdana",
fontSize: "20px",
lineNumbers: "on",
roundedSelection: false,
scrollBeyondLastLine: true,
readOnly: false,
formatOnPaste: true,
insertSpaces: true,
automaticLayout: true,
theme: "vs-dark"
});
});
</script>
</body>
</html>
That padding is generated in HTML and can be removed using css:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<style >
#container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<body>
<div id="container"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'python',
fontFamily:"Verdana",
fontSize: "20px",
lineNumbers: "on",
roundedSelection: false,
scrollBeyondLastLine: true,
readOnly: false,
formatOnPaste: true,
insertSpaces: true,
automaticLayout: true,
theme: "vs-dark"
});
});
</script>
</body>
</html>
Related
Popup of my CircleMarker object can't be accessed(it doesnt show when clicked on), the popups can be accessed by clicking at a certain CircleMarker object when two layers are active at the beginning but when I turn both layers off, and then turn on the volcano layer and then the population layer the volcano popup of a CircleMarker object isn't showing. Is there any way to solve this?
~
import folium
import pandas as ps
from branca.element import Template, MacroElement
data = ps.read_csv("Volcanoes.txt")
lat = list(data["LAT"])
lon = list(data["LON"])
elev = list(data["ELEV"])
name = list(data["NAME"])
html = """<h4>Volcano information:</h4>
<pre>
Height: %s m
Name: %s
</pre>
"""
template = """
{% macro html(this, kwargs) %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#maplegend" ).draggable({
start: function (event, ui) {
$(this).css({
right: "auto",
top: "auto",
bottom: "auto"
});
}
});
});
</script>
</head>
<body>
<div id='maplegend' class='maplegend'
style='position: absolute; z-index:9999; border:2px solid grey; background-color:rgba(255, 255, 255, 0.8);
border-radius:6px; padding: 10px; font-size:14px; right: 20px; bottom: 20px;'>
<div class='legend-title'>Legenda </div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:red;opacity:0.7;'></span>Više od 20 mil stanovnika</li>
<li><span style='background:orange;opacity:0.7;'></span>Više od 10 mil i manje od 20 mil stanovnika</li>
<li><span style='background:green;opacity:0.7;'></span>Manje od 10 mil stanovnika</li>
<li><span style='background:red;opacity:0.7;'></span>Vulkani višlji od 3000m</li>
<li><span style='background:orange;opacity:0.7;'></span>Vulkani višlji od 1000m i manji od 30000m</li>
<li><span style='background:green;opacity:0.7;'></span>Vulkani niži od 1000m</li>
</ul>
</div>
</div>
</body>
</html>
<style type='text/css'>
.maplegend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.maplegend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.maplegend .legend-scale ul li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
}
.maplegend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.maplegend .legend-source {
font-size: 80%;
color: #777;
clear: both;
}
.maplegend a {
color: #777;
}
</style>
{% endmacro %}"""
def color_producer(elevation):
if elevation<1000:
return 'green'
elif 1000 <= elevation <3000:
return 'orange'
else: return 'red'
map = folium.Map(location=[38.58,-99.09], zoom_start=6, tiles = "Stamen Terrain")
fgv = folium.FeatureGroup(name="Vulkani")
fgp = folium.FeatureGroup(name="Populacija")
fgp.add_child(folium.GeoJson(data=open('world.json','r',encoding='utf-8-sig').read(),
style_function=lambda x:{'fillColor':'green' if x['properties']['POP2005']<10000000 else 'orange' if 10000000 <= x['properties']['POP2005'] < 20000000 else 'red'}))
for lt, ln, el,nm in zip(lat, lon, elev,name):
iframe = folium.IFrame(html=html % (str(el),nm), width=200, height=100)
fgv.add_child(folium.CircleMarker(location=[lt, ln],radius = 10, popup=folium.Popup(iframe), fill_color=color_producer(el),color='grey',fill = True,fill_opacity=0.7 ))
macro = MacroElement()
macro._template = Template(template)
map.add_child(fgp)
map.add_child(fgv)
map.get_root().add_child(macro)
map.add_child(folium.LayerControl(autoZIndex=False))
map.save("Map1.html")
~
I tried map.add_child(fgv) after map.add_child(fgp) but to no avail.
I am building a garage controller using Raspberry Pi with a Flask Server on it. Everything is working as expected except the fact that I still need to figure out how to automatically update the GPIO pin status and refresh the html page to open/close automatically.
I have attached my code below, any help would be appreciated.
The refresh status button you see right now is a workaround I created to refresh the page. But I am looking for something to refresh the page automatically per PIN status change.
Flask Code
import time
from datetime import datetime
from flask import Flask, render_template, request
import RPi.GPIO as GPIO
import logging
app = Flask(__name__)
GPIO.setmode(GPIO.BOARD)
GPIO.setup(16, GPIO.IN, GPIO.PUD_UP)
GPIO.setup(7, GPIO.OUT)
#app.route("/", methods=['GET', 'POST'])
def Status():
if GPIO.input(16) == GPIO.LOW:
app.logger.info('Gate is Closed')
return render_template('Closed.html')
elif GPIO.input(16) == GPIO.HIGH:
app.logger.info('Gate is Open')
return render_template('Open.html')
#app.route("/Open", methods=['GET', 'POST'])
def Open():
GPIO.output(7, True)
app.logger.info('Gate is Opening')
return render_template('Open.html')
#app.route("/Closed", methods=['GET', 'POST'])
def Closed():
GPIO.output(7, False)
app.logger.info('Gate is Closing')
return render_template('Closed.html')
if __name__ == "__main__":
app.run()
HTML Code for Closed
<html>
<head>
<meta name="viewport" content="width=device-width">
<!--<meta http-equiv="refresh"
content="1; url = /" />-->
<!--<link rel="stylesheet" type="text/css" href="stylesheet.css">-->
<style>
.switch {
vertical-align: middle;
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.button {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #000;
padding: 10px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.sliderWrapper{display: inline-block;margin:24px 24px 24px 24px;position:relative;}
.sliderWrapper div{display: inline-block;line-height:60px;}
</style>
<script type="text/javascript">
setTimeout (
function() { window.location.reload(); },
500
)
</script>
</head>
<body bgcolor="#ff5c33">
<center>
<br>
<h1>Gate Control</h1>
<br><br> <br> <br>
<h3>Use the toggle to Open/Close the Relay!</h3>
<form action="/Open">
<div class="sliderWrapper">
<div>Close </div>
<label class="switch">
<input type="checkbox" onclick="submit();">
<span class="slider round"></span>
</label>
<div> Open </div>
</div>
</form>
<div class="refresh">
<br><br>
<h3>Use the button to Refresh the Page/Status!</h3>
Refresh
</div>
</center>
</body>
</html>
HTML Code for Open
<html>
<head>
<meta name="viewport" content="width=device-width">
<!--<meta http-equiv="refresh"
content="1; url = /" />-->
<!--<link rel="stylesheet" type="text/css" href="stylesheet.css">-->
<style>
.switch {
vertical-align: middle;
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.button {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #000;
padding: 10px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.sliderWrapper{display: inline-block;margin:24px 24px 24px 24px;position:relative;}
.sliderWrapper div{display: inline-block;line-height:60px;}
</style>
<script type="text/javascript">
setTimeout (
function() { window.location.reload(); },
500
)
</script>
</head>
<body bgcolor="lightgreen">
<center>
<br>
<h1>Gate Control</h1>
<br><br> <br> <br>
<h3>Use the toggle to Open/Close the Relay!</h3>
<form action="/Closed">
<div class="sliderWrapper">
<div>Close </div>
<label class="switch">
<input type="checkbox" checked onclick="submit();">
<span class="slider round"></span>
</label>
<div> Open </div>
</div>
</form>
<div class="refresh">
<br><br>
<h3>Use the button to Refresh the Page/Status!</h3>
Refresh
</div>
</center>
</body>
</html>
You are running into how HTTP works in the classic client server way.
Your client in the front end request something from your server
if the requested resource/page is available the server responds. and sends it back to client.
Done
The above request/response cycle explains why your refresh button is needed.
In the past one way to work around this was to run some javascript/JQuery in the front end and periodically refresh the page (AJAX/long polling) And that will still work.
By now there are other ways too, for example use a (web)sockets to create a bi directional channel in which the server can push data to the client. Working around the problem you have with classic request/response. (Flask Socket IO for example)
Both ways are worth researching, but javascript to periodically poll will probably be the quickest if not the prettiest fix.
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.
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.