canvas (#1)
El sistema ya es capaz de generar una imagen y hacer que te la descargues Co-authored-by: Borja Robert <borja@brobert.net> Reviewed-on: #1pull/2/head
parent
9429ffb57c
commit
76464a61ea
@ -0,0 +1,22 @@
|
|||||||
|
FROM node:18
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# COPY package.json and package-lock.json files
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
COPY vite.config.js ./
|
||||||
|
|
||||||
|
# COPY tsconfig.json file
|
||||||
|
COPY jsconfig.json ./
|
||||||
|
|
||||||
|
# COPY
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
CMD [ "node", "/app/build" ]
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"schemaVersion": 2,
|
||||||
|
"dockerfilePath": "./Dockerfile"
|
||||||
|
}
|
||||||
@ -1,145 +1,155 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import html2canvas from 'html2canvas';
|
||||||
|
import { title, subtitle, date, address, content, heading, canvas } from '$lib/stores/store';
|
||||||
|
|
||||||
import {title, subtitle, date, address, content, heading} from '$lib/stores/store'
|
let newdate = '';
|
||||||
|
|
||||||
let newdate = "";
|
const convertDateTime = (datetime) => {
|
||||||
|
if (datetime == undefined) {
|
||||||
const convertDateTime = (datetime) => {
|
return {
|
||||||
if (datetime == undefined) {
|
date: '',
|
||||||
return {
|
time: ''
|
||||||
date: "",
|
};
|
||||||
time: ""
|
}
|
||||||
};
|
const year = datetime.split('-')[0];
|
||||||
|
const month = datetime.split('-')[1];
|
||||||
|
const day = datetime.split('-')[2].split('T')[0];
|
||||||
|
const time = datetime.split('T')[1];
|
||||||
|
return {
|
||||||
|
date: `${day}/${month}`,
|
||||||
|
time: time
|
||||||
|
};
|
||||||
};
|
};
|
||||||
const year = datetime.split("-")[0];
|
|
||||||
const month = datetime.split("-")[1];
|
|
||||||
const day = datetime.split("-")[2].split("T")[0];
|
|
||||||
const time = datetime.split("T")[1];
|
|
||||||
return {
|
|
||||||
date: `${day}/${month}`,
|
|
||||||
time: time,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$: if ($date !== "") {newdate = convertDateTime($date)};
|
|
||||||
|
|
||||||
|
$: if ($date !== '') {
|
||||||
|
newdate = convertDateTime($date);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
<div class="result">
|
<div class="result" bind:this={$canvas}>
|
||||||
<div class="heading">{$heading}</div>
|
<div class="heading">{$heading}</div>
|
||||||
<div class="title">{$title}</div>
|
<div class="title">{$title}</div>
|
||||||
<div class="subtitle">{$subtitle}</div>
|
<div class="subtitle">{$subtitle}</div>
|
||||||
<div class="content">{@html $content}</div>
|
<div class="content">{@html $content}</div>
|
||||||
{#if newdate}<div class="date">{newdate.date}</div>{/if}
|
{#if newdate}<div class="date">{newdate.date}</div>{/if}
|
||||||
{#if newdate}<div class="time">{newdate.time}</div>{/if}
|
{#if newdate}<div class="time">{newdate.time}</div>{/if}
|
||||||
<div class="address">{$address}</div>
|
<div class="address">{$address}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.preview {
|
.preview {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result {
|
.result {
|
||||||
display: block;
|
display: block;
|
||||||
aspect-ratio: 1/1.4142;
|
aspect-ratio: 1/1.4142;
|
||||||
min-height: 842px;
|
min-height: 842px;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
background-color: lightblue;
|
background-color: lightblue;
|
||||||
width: auto;
|
width: auto;
|
||||||
background-image: url('imagen01.png');
|
background-image: url('/imagen01.png');
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
box-shadow: 0 0 16px 0 rgba(0,0,0,0.3);
|
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 300px;
|
top: 300px;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: grey;
|
color: grey;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
}
|
height: 1.2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 320px;
|
top: 320px;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
align-self: center;
|
font-family: 'Gill Sans', sans-serif;
|
||||||
font-family: 'Gill Sans', sans-serif;
|
font-size: 2.5rem;
|
||||||
font-size: 2.5rem;
|
font-variant: small-caps;
|
||||||
font-variant: small-caps;
|
line-height: 2.5rem;
|
||||||
line-height: 2.5rem;
|
color: firebrick;
|
||||||
color: firebrick;
|
font-weight: 600;
|
||||||
font-weight: 600;
|
height: 5rem;
|
||||||
height: 5rem;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
display: flex;
|
||||||
}
|
justify-content: center;
|
||||||
.subtitle {
|
align-items: center;
|
||||||
position: absolute;
|
text-align: center;
|
||||||
top: 415px;
|
}
|
||||||
left: 1rem;
|
.subtitle {
|
||||||
right: 2rem;
|
position: absolute;
|
||||||
font-size: 1.1rem;
|
display: flex;
|
||||||
color: #575;
|
top: 415px;
|
||||||
height: 2.6rem;
|
left: 1rem;
|
||||||
overflow: hidden;
|
right: 2rem;
|
||||||
}
|
font-size: 1.1rem;
|
||||||
|
color: #575;
|
||||||
|
height: 2.6rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 500px;
|
top: 500px;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
right: 16rem;
|
right: 16rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: #222;
|
color: #222;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: 9rem;
|
height: 9rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 600px;
|
top: 600px;
|
||||||
left: 23rem;
|
left: 23rem;
|
||||||
right: 6rem;
|
right: 6rem;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
color: white;
|
color: white;
|
||||||
max-height: 2rem;
|
max-height: 2rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 640px;
|
top: 640px;
|
||||||
left: 23rem;
|
left: 23rem;
|
||||||
right: 6rem;
|
right: 6rem;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 0 0 16px rgba(0,0,0,0.4);
|
text-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
|
||||||
max-height: 2rem;
|
max-height: 2rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.address {
|
.address {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 650px;
|
top: 650px;
|
||||||
left: 2rem;
|
left: 2rem;
|
||||||
right: 15rem;
|
right: 17rem;
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
font-family: serif;
|
font-family: serif;
|
||||||
color: firebrick;
|
color: firebrick;
|
||||||
max-height: 4rem;
|
max-height: 4rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue