79 lines
2.0 KiB
HTML
79 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Head is not important since
|
|
we will only print the body-->
|
|
</head>
|
|
<body>
|
|
<style>
|
|
@font-face {
|
|
font-family: Roboto;
|
|
src: url(font/robotolight.ttf);
|
|
font-weight: lighter;
|
|
}
|
|
@font-face {
|
|
font-family: Roboto;
|
|
src: url(font/robotoregular.ttf);
|
|
font-weight: normal;
|
|
}
|
|
@font-face {
|
|
font-family: Roboto;
|
|
src: url(font/robotobold.ttf);
|
|
font-weight: bold;
|
|
}
|
|
|
|
* {
|
|
text-align: center;
|
|
font-family: Roboto;
|
|
}
|
|
h1 {
|
|
margin-top: 8rem;
|
|
font-size: 36pt;
|
|
}
|
|
p {
|
|
font-size: 24pt;
|
|
}
|
|
#hint_title {
|
|
margin-top: 10rem;
|
|
font-weight: bold;
|
|
}
|
|
img {
|
|
margin-top: 5rem;
|
|
height: 400px;
|
|
}
|
|
|
|
/* Background stripes */
|
|
#red {
|
|
position: absolute;
|
|
bottom: -350px;
|
|
left: 0;
|
|
z-index: -1;
|
|
width: 340px;
|
|
height: 815px;
|
|
background-color: #FF2A2A;
|
|
transform: rotate(130deg);
|
|
}
|
|
#black {
|
|
position: absolute;
|
|
bottom: -320px;
|
|
right: 0;
|
|
z-index: -1;
|
|
width: 380px;
|
|
height: 815px;
|
|
background-color: #1C1C1C;
|
|
transform: rotate(-130deg);
|
|
}
|
|
</style>
|
|
<div id="content">
|
|
<h1>OffPass</h1>
|
|
<p>Created on $DATE</p>
|
|
|
|
<p id="hint_title">Password hint</p>
|
|
<p>$HINT</p>
|
|
|
|
<img src="drawable/dummy_qr_code.png">
|
|
<div id="red"></div>
|
|
<div id="black"></div>
|
|
</div>
|
|
</body>
|
|
</html> |