añado cosas
parent
b52e79acac
commit
444bfbb60a
@ -0,0 +1,24 @@
|
||||
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
|
||||
|
||||
RUN [ "chmod", "+x", "/app/start.sh"]
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD [ "/app/start.sh" ]
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"schemaVersion": 2,
|
||||
"dockerfilePath": "./Dockerfile"
|
||||
}
|
||||
@ -1,145 +1,157 @@
|
||||
<script>
|
||||
import html2canvas from 'html2canvas';
|
||||
import { title, subtitle, date, address, content, heading } from '$lib/stores/store';
|
||||
|
||||
import {title, subtitle, date, address, content, heading} from '$lib/stores/store'
|
||||
let newdate = '';
|
||||
let inner;
|
||||
|
||||
let newdate = "";
|
||||
|
||||
const convertDateTime = (datetime) => {
|
||||
if (datetime == undefined) {
|
||||
return {
|
||||
date: "",
|
||||
time: ""
|
||||
};
|
||||
const convertDateTime = (datetime) => {
|
||||
if (datetime == undefined) {
|
||||
return {
|
||||
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);
|
||||
}
|
||||
|
||||
const takeScreenshot = async () => {
|
||||
const res = await html2canvas(inner);
|
||||
const image = await res.toDataURL('image/png');
|
||||
const link = document.createElement('a');
|
||||
link.download = 'cartel.png';
|
||||
link.href = image;
|
||||
link.click();
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="preview">
|
||||
<div class="result">
|
||||
<div class="heading">{$heading}</div>
|
||||
<div class="title">{$title}</div>
|
||||
<div class="subtitle">{$subtitle}</div>
|
||||
<div class="content">{@html $content}</div>
|
||||
{#if newdate}<div class="date">{newdate.date}</div>{/if}
|
||||
{#if newdate}<div class="time">{newdate.time}</div>{/if}
|
||||
<div class="address">{$address}</div>
|
||||
</div>
|
||||
<div class="result" bind:this={inner}>
|
||||
<div class="heading">{$heading}</div>
|
||||
<div class="title">{$title}</div>
|
||||
<div class="subtitle">{$subtitle}</div>
|
||||
<div class="content">{@html $content}</div>
|
||||
{#if newdate}<div class="date">{newdate.date}</div>{/if}
|
||||
{#if newdate}<div class="time">{newdate.time}</div>{/if}
|
||||
<div class="address">{$address}</div>
|
||||
</div>
|
||||
<button on:click|preventDefault={takeScreenshot}>Descargar</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.preview {
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.preview {
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result {
|
||||
display: block;
|
||||
aspect-ratio: 1/1.4142;
|
||||
min-height: 842px;
|
||||
align-self: center;
|
||||
background-color: lightblue;
|
||||
width: auto;
|
||||
background-image: url('imagen01.png');
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 0 16px 0 rgba(0,0,0,0.3);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.result {
|
||||
display: block;
|
||||
aspect-ratio: 1/1.4142;
|
||||
min-height: 842px;
|
||||
align-self: center;
|
||||
background-color: lightblue;
|
||||
width: auto;
|
||||
background-image: url('imagen01.png');
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1rem;
|
||||
color: grey;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.heading {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1rem;
|
||||
color: grey;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 320px;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
align-self: center;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-variant: small-caps;
|
||||
line-height: 2.5rem;
|
||||
color: firebrick;
|
||||
font-weight: 600;
|
||||
height: 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subtitle {
|
||||
position: absolute;
|
||||
top: 415px;
|
||||
left: 1rem;
|
||||
right: 2rem;
|
||||
font-size: 1.1rem;
|
||||
color: #575;
|
||||
height: 2.6rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 320px;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
align-self: center;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-variant: small-caps;
|
||||
line-height: 2.5rem;
|
||||
color: firebrick;
|
||||
font-weight: 600;
|
||||
height: 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subtitle {
|
||||
position: absolute;
|
||||
top: 415px;
|
||||
left: 1rem;
|
||||
right: 2rem;
|
||||
font-size: 1.1rem;
|
||||
color: #575;
|
||||
height: 2.6rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
left: 1rem;
|
||||
right: 16rem;
|
||||
font-size: 1rem;
|
||||
color: #222;
|
||||
line-height: 1.5rem;
|
||||
height: 9rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
left: 1rem;
|
||||
right: 16rem;
|
||||
font-size: 1rem;
|
||||
color: #222;
|
||||
line-height: 1.5rem;
|
||||
height: 9rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 600px;
|
||||
left: 23rem;
|
||||
right: 6rem;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
max-height: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 600px;
|
||||
left: 23rem;
|
||||
right: 6rem;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
max-height: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
top: 640px;
|
||||
left: 23rem;
|
||||
right: 6rem;
|
||||
font-size: 1.8rem;
|
||||
color: white;
|
||||
text-shadow: 0 0 16px rgba(0,0,0,0.4);
|
||||
max-height: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
top: 640px;
|
||||
left: 23rem;
|
||||
right: 6rem;
|
||||
font-size: 1.8rem;
|
||||
color: white;
|
||||
text-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
|
||||
max-height: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.address {
|
||||
position: absolute;
|
||||
top: 650px;
|
||||
left: 2rem;
|
||||
right: 15rem;
|
||||
font-size: 1.15rem;
|
||||
font-family: serif;
|
||||
color: firebrick;
|
||||
max-height: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.address {
|
||||
position: absolute;
|
||||
top: 650px;
|
||||
left: 2rem;
|
||||
right: 15rem;
|
||||
font-size: 1.15rem;
|
||||
font-family: serif;
|
||||
color: firebrick;
|
||||
max-height: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue