brobert
/
carteles
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

añado cosas

Browse Source
pull/1/head
Borja Robert 2 years ago
parent b52e79acac
commit 444bfbb60a
3 changed files with 165 additions and 125 deletions
Show Stats Download Patch File Download Diff File

24
Dockerfile
Unescape Escape View File

@ -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" ]

4
captain-definition
Unescape Escape View File

@ -0,0 +1,4 @@
{
"schemaVersion": 2,
"dockerfilePath": "./Dockerfile"
}

262
src/lib/preview/Preview.svelte
Unescape Escape View File

@ -1,145 +1,157 @@
<script> <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) {
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);
}
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> </script>
<div class="preview"> <div class="preview">
<div class="result"> <div class="result" bind:this={inner}>
<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>
<button on:click|preventDefault={takeScreenshot}>Descargar</button>
</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;
} }
.title { .title {
position: absolute; position: absolute;
top: 320px; top: 320px;
left: 1rem; left: 1rem;
right: 1rem; right: 1rem;
align-self: center; 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;
} }
.subtitle { .subtitle {
position: absolute; position: absolute;
top: 415px; top: 415px;
left: 1rem; left: 1rem;
right: 2rem; right: 2rem;
font-size: 1.1rem; font-size: 1.1rem;
color: #575; color: #575;
height: 2.6rem; height: 2.6rem;
overflow: hidden; overflow: hidden;
} }
.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: 15rem;
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>

Write Preview
Loading…
Cancel
Save