mirror of
https://github.com/les-briques-du-web/briques-poster.git
synced 2026-03-10 08:51:19 +00:00
Updating styles and adding generate button
This commit is contained in:
Horacio Gonzalez
103
index.html
103
index.html
@@ -35,6 +35,13 @@
|
||||
h2, h3, h4, h5, h6{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height:90%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
}
|
||||
|
||||
briques-poster {
|
||||
@@ -60,33 +67,37 @@
|
||||
}
|
||||
|
||||
.left-side{
|
||||
flex: 0 0 40%;
|
||||
flex: 0 0 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.right-side{
|
||||
flex: 0 0 60%;
|
||||
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{
|
||||
width:80%;
|
||||
display: block;
|
||||
object-fit:contain;
|
||||
}
|
||||
|
||||
.whichwhen{
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-block-end: 1.0em;
|
||||
}
|
||||
|
||||
.which{
|
||||
@@ -95,74 +106,131 @@
|
||||
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{
|
||||
flex: 0 0 40%;
|
||||
|
||||
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{
|
||||
flex: 0 0 30%;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.speakerface{
|
||||
flex: 0 0 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.speakerface img{
|
||||
max-width:80%;
|
||||
max-height:80%;
|
||||
max-width:300px;
|
||||
max-height:300px;
|
||||
border-radius: 50%;
|
||||
border: 10px solid white;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.speakerinfo{
|
||||
flex: 0 0 70%;
|
||||
|
||||
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{
|
||||
flex: 0 0 30%;
|
||||
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>
|
||||
<briques-poster></briques-poster>
|
||||
<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>
|
||||
setTimeout(() => {
|
||||
domtoimage.toPng(document.body)
|
||||
let generatePng = () => {
|
||||
console.log('Generating...');
|
||||
domtoimage.toPng(document.querySelector("#poster"))
|
||||
// @ts-ignore 😬
|
||||
.then((dataUrl) => {
|
||||
const img = new Image();
|
||||
@@ -173,8 +241,7 @@
|
||||
.catch((error) => {
|
||||
console.error('oops, something went wrong!', error);
|
||||
});
|
||||
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
319
package-lock.json
generated
319
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -25,22 +25,25 @@ export class BriquesPoster extends LitElement {
|
||||
alt="logo des briques"
|
||||
src="assets/logo_color_text_square.png"
|
||||
/>
|
||||
<div>@LesBriquesDuWeb</div>
|
||||
</div>
|
||||
|
||||
<div class="whichwhen">
|
||||
<div class="which">
|
||||
<h2>${this.speaker.episode}</h2>
|
||||
</div>
|
||||
<div class="when">
|
||||
<h4 class="space">${this.speaker.date}</h4>
|
||||
<h4>${this.speaker.time}</h4>
|
||||
<h3>${this.speaker.date}</h3>
|
||||
<h3>${this.speaker.time}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="title">
|
||||
<h5>${this.speaker.title}</h5>
|
||||
<h6>${this.speaker.subtitle}</h6>
|
||||
<h1>${this.speaker.title}</h1>
|
||||
<h2>${this.speaker.subtitle}</h2>
|
||||
</div>
|
||||
|
||||
<div class="speaker">
|
||||
<div class="speakerface">
|
||||
<img
|
||||
@@ -48,13 +51,14 @@ export class BriquesPoster extends LitElement {
|
||||
src="assets/speakers/${this.speaker.image}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="speakerinfo">
|
||||
<h5>${this.speaker.name}</h5>
|
||||
<h5>${this.speaker.twitter}</h5>
|
||||
<h1>${this.speaker.name}</h1>
|
||||
<h2>${this.speaker.twitter}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="twitch">
|
||||
<h6>https://www.twitch.tv/rdvspeakers</h6>
|
||||
<h2>https://www.twitch.tv/rdvspeakers</h2>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user