mirror of
https://github.com/les-briques-du-web/briques-poster.git
synced 2026-03-10 08:51:19 +00:00
249 lines
4.7 KiB
HTML
249 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<meta name="Description" content="Put your description here.">
|
|
<link rel="icon" type="image/png" href="assets/logo_color_text.png"/>
|
|
<base href="/">
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: "Snowy_Night";
|
|
src: url("assets/Snowy_Night.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "KOMTXTT_";
|
|
src: url("assets/KOMTXTT_.ttf") format("truetype");
|
|
}
|
|
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body{
|
|
width: 1920px;
|
|
height: 1080px;
|
|
}
|
|
|
|
h2, h3, h4, h5, h6{
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height:90%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h {
|
|
margin-bottom: 0.5em;
|
|
|
|
}
|
|
|
|
briques-poster {
|
|
text-align: center;
|
|
font-size : 6rem;
|
|
font-family : KOMTXTT_;
|
|
color: #f9f9f9;
|
|
|
|
display: inline-block;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
background-image: url("assets/briques_horacio3.png");
|
|
background-repeat: repeat;
|
|
background-size: auto;
|
|
/*opacity: 80%;*/
|
|
}
|
|
|
|
main {
|
|
background-color: rgba(128, 0, 0, 0.4);
|
|
display: flex;
|
|
width: 100%;
|
|
height:100%;
|
|
}
|
|
|
|
.left-side{
|
|
flex: 0 0 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.right-side{
|
|
flex: 0 0 70%;
|
|
display:flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.logo{
|
|
flex: 0 0 50%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.logo img{
|
|
display: block;
|
|
object-fit:contain;
|
|
}
|
|
|
|
.whichwhen{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-block-end: 1.0em;
|
|
}
|
|
|
|
.which{
|
|
flex: 0 0 30%;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.which > h2 {
|
|
font-size: 1.25em;
|
|
font-weight: normal;
|
|
margin-block-end: 0.25em;
|
|
}
|
|
|
|
.when{
|
|
flex: 0 0 70%;
|
|
}
|
|
.when > h3 {
|
|
font-size: 1.00em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.when .space{
|
|
margin-top:5%;
|
|
}
|
|
|
|
.title{
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title > h1 {
|
|
font-size: 1.25em;
|
|
line-height: 90%;
|
|
font-weight: normal;
|
|
margin-block-start: 0.1em;
|
|
margin-block-end: 0.1em;
|
|
}
|
|
|
|
.title > h2 {
|
|
font-size: 1.0em;
|
|
line-height: 90%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.speaker{
|
|
display:flex;
|
|
flex-direction:row;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.speakerface{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.speakerface img{
|
|
max-width:300px;
|
|
max-height:300px;
|
|
border-radius: 50%;
|
|
border: 10px solid white;
|
|
background-color: white;
|
|
}
|
|
|
|
.speakerinfo{
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
.speakerinfo > h1 {
|
|
font-size: 1.0em;
|
|
line-height: 90%;
|
|
font-weight: normal;
|
|
margin-block-start: 0.1em;
|
|
margin-block-end: 0.1em;
|
|
}
|
|
|
|
.speakerinfo > h2 {
|
|
font-size: 0.8em;
|
|
line-height: 90%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
.twitch{
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.twitch h2 {
|
|
font-size: 1.0em;
|
|
line-height: 90%;
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
.generate {
|
|
width: 500px;
|
|
font-size: 5rem;
|
|
color: white;
|
|
background-color: #800000;
|
|
border-radius: 10px;
|
|
margin-bottom: 3rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.spacer {
|
|
width: 100%;
|
|
height: 3rem;
|
|
}
|
|
</style>
|
|
<title>briques-posters</title>
|
|
</head>
|
|
|
|
<body>
|
|
<button class="generate" onclick="generatePng()">Generate</button>
|
|
<briques-poster id="poster"></briques-poster>
|
|
<div class="spacer"></div>
|
|
|
|
<script type="module" src="./out-tsc/src/BriquesPoster.js"></script>
|
|
<!-- <script type="module" src="./out-tsc/src/CanvasStuff.js"></script>-->
|
|
<script src="assets/dom-to-image.min.js"></script>
|
|
<script>
|
|
let generatePng = () => {
|
|
console.log('Generating...');
|
|
domtoimage.toPng(document.querySelector("#poster"))
|
|
// @ts-ignore 😬
|
|
.then((dataUrl) => {
|
|
const img = new Image();
|
|
img.src = dataUrl;
|
|
document.body.appendChild(img);
|
|
})
|
|
// @ts-ignore 😬
|
|
.catch((error) => {
|
|
console.error('oops, something went wrong!', error);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|