diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte index 32df4cf..c9aceb6 100644 --- a/src/lib/header/Header.svelte +++ b/src/lib/header/Header.svelte @@ -1,5 +1,5 @@
-

Carteles dmd

+

Carteles dmd

diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte index c8b0e53..b5dffe7 100644 --- a/src/lib/preview/Preview.svelte +++ b/src/lib/preview/Preview.svelte @@ -1,18 +1,15 @@
-
-
{$heading}
-
{$title}
-
{$subtitle}
-
{@html $content}
-
{$weekday}
- {#if newdate.date}
{newdate.date}
{/if} - {#if newdate.time}
{newdate.time}
{/if} -
{$address}
+
+ {#if templateIndex >= 0} + + + <Subtitle {templateIndex} /> + <Content {templateIndex} /> + <Weekday {templateIndex} /> + <Date {templateIndex} /> + <Address {templateIndex} /> + <!-- <div class="address">{$address}</div> --> + {/if} {#if $organizedBy[0] && $colabs[0]} <div class="orgcolab"> <div class="org">Organiza:</div> <div class="colab">Colabora:</div> <div class="orgmixed"> - {#each $organizedBy as organization, i} + {#each $organizedBy as organization} <div class="organization"> <img src={organization.image} alt={organization.text} /> <div class="caption">{organization.text}</div> @@ -61,7 +60,7 @@ {/each} </div> <div class="colabmixed"> - {#each $colabs as organization, i} + {#each $colabs as organization} <div class="organization"> <img src={organization.image} alt={organization.text} /> <div class="caption">{organization.text}</div> @@ -73,7 +72,7 @@ {#if $organizedBy[0] && !$colabs[0]} <div class="imagetitle">Organiza:</div> <div class="organized-by"> - {#each $organizedBy as organization, i} + {#each $organizedBy as organization} <div class="organization"> <img src={organization.image} alt={organization.text} /> <div class="caption">{organization.text}</div> @@ -84,7 +83,7 @@ {#if $colabs[0] && !$organizedBy[0]} <div class="imagetitle">Colabora:</div> <div class="organized-by"> - {#each $colabs as organization, i} + {#each $colabs as organization} <div class="organization"> <img src={organization.image} alt={organization.text} /> <div class="caption">{organization.text}</div> @@ -96,5 +95,104 @@ </div> <style> - /* @import url(`'${template}.css'`); */ + .preview { + padding: 0.5rem; + display: grid; + justify-content: center; + grid-template-columns: 1fr; + align-items: start; + } + + .result { + display: block; + aspect-ratio: 1/1.4142; + min-height: 842px; + align-self: center; + width: auto; + background-size: contain; + position: relative; + padding: 1rem; + } + + .imagetitle { + position: absolute; + top: 720px; + font-size: 0.8rem; + color: #444; + } + + .organized-by { + position: absolute; + top: 740px; + left: 1rem; + right: 1rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr)); + grid-template-rows: min-content; + grid-auto-rows: auto; + justify-content: center; + align-items: center; + } + + .organization { + margin: 0 1rem; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + } + + .organization img { + max-height: 48px; + max-width: 100px; + margin: 0 auto; + opacity: 75%; + } + + .caption { + margin: 0.5rem 0; + font-size: 0.7rem; + font-family: sans-serif; + text-transform: uppercase; + color: #666; + } + + .orgcolab { + position: absolute; + top: 720px; + height: 7rem; + overflow: hidden; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content 1fr; + grid-gap: 0.25rem; + justify-content: start; + align-items: center; + width: 100%; + } + + .org { + grid-row: 1/2; + grid-column: 1/2; + font-size: 0.8rem; + } + + .colab { + font-size: 0.8rem; + grid-row: 1/2; + grid-column: 2/3; + } + + .orgmixed { + grid-row: 2/3; + grid-column: 1/2; + display: flex; + } + + .colabmixed { + grid-row: 2/3; + grid-column: 2/3; + display: flex; + } </style> diff --git a/src/lib/templates/Address.svelte b/src/lib/templates/Address.svelte new file mode 100644 index 0000000..fc62f5e --- /dev/null +++ b/src/lib/templates/Address.svelte @@ -0,0 +1,38 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { address } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $address} + <div + class="address" + style=" + top: {templates[templateIndex].address.top}px; + height: {templates[templateIndex].address.height}rem; + left: {templates[templateIndex].address.left}rem; + right: {templates[templateIndex].address.right}rem; + color: {templates[templateIndex].address.color}; + font-size: {templates[templateIndex].address.fontSize}rem; + font-family: {templates[templateIndex].address.fontFamily}; + line-height: {templates[templateIndex].address.lineHeight}; + text-align: {templates[templateIndex].address.textAlign}; + font-weight: {templates[templateIndex].address.fontWeight}; + line-height: {templates[templateIndex].address.lineHeight}rem; + " + > + {$address} + </div> +{/if} + +<style> + .address { + position: absolute; + display: grid; + overflow: hidden; + white-space: pre-wrap; + align-items: center; + justify-content: center; + } +</style> diff --git a/src/lib/templates/Content.svelte b/src/lib/templates/Content.svelte new file mode 100644 index 0000000..6bba7f0 --- /dev/null +++ b/src/lib/templates/Content.svelte @@ -0,0 +1,36 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { content } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $content} + <div + class="content" + style=" + top: {templates[templateIndex].content.top}px; + height: {templates[templateIndex].content.height}rem; + left: {templates[templateIndex].content.left}rem; + right: {templates[templateIndex].content.right}rem; + color: {templates[templateIndex].content.color}; + font-size: {templates[templateIndex].content.fontSize}rem; + font-family: {templates[templateIndex].content.fontFamily}; + text-align: {templates[templateIndex].content.textAlign}; + font-weight: {templates[templateIndex].content.fontWeight}; + line-height: {templates[templateIndex].content.lineHeight}rem; + " + > + {@html $content} + </div> +{/if} + +<style> + .content { + position: absolute; + display: flex; + flex-direction: column; + overflow: hidden; + justify-content: center; + } +</style> diff --git a/src/lib/templates/Date.svelte b/src/lib/templates/Date.svelte new file mode 100644 index 0000000..aab284b --- /dev/null +++ b/src/lib/templates/Date.svelte @@ -0,0 +1,90 @@ +<script> + import { getMonthName } from '$lib/monthName'; + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { date } from '$lib/stores/store'; + + /** @typedef + * {{ + * date: string; + * time: string; + * }} Newdate + */ + + /** @type {Newdate} */ let newdate = { date: '', time: '' }; + + const convertDateTime = (/** @type {(string | undefined)} */ datetime) => { + if (datetime == undefined) { + return { + date: '', + time: '' + }; + } + const monthNumber = datetime.split('-')[1]; + const day = datetime.split('-')[2].split('T')[0]; + const time = datetime.split('T')[1]; + const month = getMonthName(monthNumber); + return { + date: `${day} de ${month}`, + time: time + }; + }; + + $: if ($date !== '') { + newdate = convertDateTime($date); + } +</script> + +{#if templates[templateIndex] && newdate.date} + <div + class="date" + style=" + top: {templates[templateIndex].date.top}px; + height: {templates[templateIndex].date.height}rem; + left: {templates[templateIndex].date.left}rem; + right: {templates[templateIndex].date.right}rem; + color: {templates[templateIndex].date.color}; + font-size: {templates[templateIndex].date.fontSize}rem; + font-family: {templates[templateIndex].date.fontFamily}; + text-align: {templates[templateIndex].date.textAlign}; + font-weight: {templates[templateIndex].date.fontWeight}; + line-height: {templates[templateIndex].date.lineHeight}rem; + " + > + {newdate.date} + </div> +{/if} +{#if templates[templateIndex] && newdate.time} + <div + class="time" + style=" + top: {templates[templateIndex].time.top}px; + height: {templates[templateIndex].time.height}rem; + left: {templates[templateIndex].time.left}rem; + right: {templates[templateIndex].time.right}rem; + color: {templates[templateIndex].time.color}; + font-size: {templates[templateIndex].time.fontSize}rem; + font-family: {templates[templateIndex].time.fontFamily}; + text-align: {templates[templateIndex].time.textAlign}; + font-weight: {templates[templateIndex].time.fontWeight}; + line-height: {templates[templateIndex].time.lineHeight}rem; + " + > + {newdate.time} + </div> +{/if} + +<style> + .date { + position: absolute; + text-transform: uppercase; + overflow: hidden; + display: block; + } + + .time { + position: absolute; + overflow: hidden; + } +</style> diff --git a/src/lib/templates/Subtitle.svelte b/src/lib/templates/Subtitle.svelte new file mode 100644 index 0000000..6c565e4 --- /dev/null +++ b/src/lib/templates/Subtitle.svelte @@ -0,0 +1,37 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { subtitle } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $subtitle} + <div + class="subtitle" + style=" + top: {templates[templateIndex].subtitle.top}px; + height: {templates[templateIndex].subtitle.height}rem; + left: {templates[templateIndex].subtitle.left}rem; + right: {templates[templateIndex].subtitle.right}rem; + color: {templates[templateIndex].subtitle.color}; + font-size: {templates[templateIndex].subtitle.fontSize}rem; + font-family: {templates[templateIndex].subtitle.fontFamily}; + text-align: {templates[templateIndex].subtitle.textAlign}; + font-weight: {templates[templateIndex].subtitle.fontWeight}; + line-height: {templates[templateIndex].subtitle.lineHeight}rem; + " + > + {$subtitle} + </div> +{/if} + +<style> + .subtitle { + position: absolute; + font-variant: small-caps; + overflow: hidden; + display: flex; + justify-content: center; + align-items: start; + } +</style> diff --git a/src/lib/templates/Template.svelte b/src/lib/templates/Template.svelte deleted file mode 100644 index 49f5fcd..0000000 --- a/src/lib/templates/Template.svelte +++ /dev/null @@ -1,2 +0,0 @@ -<script> -</script> diff --git a/src/lib/templates/Title.svelte b/src/lib/templates/Title.svelte new file mode 100644 index 0000000..b47aa14 --- /dev/null +++ b/src/lib/templates/Title.svelte @@ -0,0 +1,38 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { title } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $title} + <div + class="title" + style=" + top: {templates[templateIndex].title.top}px; + height: {templates[templateIndex].title.height}rem; + left: {templates[templateIndex].title.left}rem; + right: {templates[templateIndex].title.right}rem; + color: {templates[templateIndex].title.color}; + font-size: {templates[templateIndex].title.fontSize}rem; + font-family: {templates[templateIndex].title.fontFamily}; + text-align: {templates[templateIndex].title.textAlign}; + font-weight: {templates[templateIndex].title.fontWeight}; + line-height: {templates[templateIndex].title.lineHeight}rem; + + " + > + {$title} + </div> +{/if} + +<style> + .title { + position: absolute; + font-variant: small-caps; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + } +</style> diff --git a/src/lib/templates/Weekday.svelte b/src/lib/templates/Weekday.svelte new file mode 100644 index 0000000..169cd6b --- /dev/null +++ b/src/lib/templates/Weekday.svelte @@ -0,0 +1,34 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { weekday } from '$lib/stores/store'; +</script> + +{#if templates[templateIndex] && $weekday} + <div + class="weekday" + style=" + top: {templates[templateIndex].weekday.top}px; + height: {templates[templateIndex].weekday.height}rem; + left: {templates[templateIndex].weekday.left}rem; + right: {templates[templateIndex].weekday.right}rem; + color: {templates[templateIndex].weekday.color}; + font-size: {templates[templateIndex].weekday.fontSize}rem; + font-family: {templates[templateIndex].weekday.fontFamily}; + text-align: {templates[templateIndex].weekday.textAlign}; + font-weight: {templates[templateIndex].weekday.fontWeight}; + line-height: {templates[templateIndex].weekday.lineHeight}rem; + " + > + {$weekday} + </div> +{/if} + +<style> + .weekday { + position: absolute; + text-transform: uppercase; + overflow: hidden; + } +</style> diff --git a/src/lib/templates/azul.js b/src/lib/templates/azul.js new file mode 100644 index 0000000..a7ec8ce --- /dev/null +++ b/src/lib/templates/azul.js @@ -0,0 +1,104 @@ +import '$lib/templates/templates' + +/** @type {import('$lib/templates/templates').Template} */ +export const azul = { + name: "azul", + image: "azul.png", + heading: { + top: 440, + height: 2, + left: 10, + right: 1, + fontSize: 2, + color: "white", + fontFamily: "sans-serif", + lineHeight: 2, + textAlign: "right", + fontWeight: 700 + }, + title: { + top: 487, + height: 7.5, + left: 1, + right: 1, + fontSize: 3, + color: "firebrick", + fontFamily: "sans-serif", + lineHeight: 2.4, + textAlign: "right", + fontWeight: 700 + + }, + subtitle: { + top: 620, + height: 1.4, + left: 1, + right: 2, + fontSize: 1.6, + color: "white", + fontFamily: "Gill Sans, sans-serif", + lineHeight: 1.5, + textAlign: "center", + fontWeight: 400 + }, + content: { + top: 480, + height: 8.5, + left: 1.5, + right: 17, + fontSize: 0, + color: "#222", + fontFamily: "sans-serif", + lineHeight: 1.1, + textAlign: "left", + fontWeight: 700 + }, + date: { + top: 25, + height: 4, + left: 5, + right: 1, + fontSize: 1.1, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 1, + textAlign: "right", + fontWeight: 700 + }, + time: { + top: 65, + height: 2, + left: 18.5, + right: 1, + fontSize: 1.8, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 2, + textAlign: "right", + fontWeight: 700 + }, + weekday: { + top: 25, + height: 1.5, + left: 1, + right: 10, + fontSize: 1.3, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 1.8, + textAlign: "left", + fontWeight: 700 + }, + address: { + top: 660, + height: 5.5, + left: 2, + right: 2, + fontSize: 1.2, + color: "white", + fontFamily: "sans-serif", + lineHeight: 1.8, + textAlign: "left", + fontWeight: 400 + }, +} \ No newline at end of file diff --git a/src/lib/templates/heading.svelte b/src/lib/templates/heading.svelte new file mode 100644 index 0000000..3a4d0e7 --- /dev/null +++ b/src/lib/templates/heading.svelte @@ -0,0 +1,34 @@ +<script> + import { templates } from '$lib/templates/templates'; + + /** @type number */ export let templateIndex; + import { heading } from '$lib/stores/store'; +</script> + +{#if $heading && templates[templateIndex].heading} + <div + class="heading" + style=" + top: {templates[templateIndex].heading.top}px; + height: {templates[templateIndex].heading.height}rem; + left: {templates[templateIndex].heading.left}rem; + right: {templates[templateIndex].heading.right}rem; + color: {templates[templateIndex].heading.color}; + font-size: {templates[templateIndex].heading.fontSize}rem; + font-family: {templates[templateIndex].heading.fontFamily}; + text-align: {templates[templateIndex].heading.textAlign}; + font-weight: {templates[templateIndex].heading.fontWeight}; + line-height: {templates[templateIndex].heading.lineHeight}rem; + " + > + {$heading} + </div> +{/if} + +<style> + .heading { + position: absolute; + font-variant: small-caps; + overflow: hidden; + } +</style> diff --git a/src/lib/templates/templates.js b/src/lib/templates/templates.js new file mode 100644 index 0000000..52d4954 --- /dev/null +++ b/src/lib/templates/templates.js @@ -0,0 +1,36 @@ +import { verde } from '$lib/templates/verde'; +import { azul } from '$lib/templates/azul'; +/** +* @typedef {{ +* top: number; +* height: number; +* right: number; +* left: number; +* color: string; +* fontSize: number; +* fontFamily: string; +* lineHeight: number; +* textAlign: string; +* fontWeight: number; +* }} Element +*/ + +/** +* @typedef {{ +* name: string; +* image: string; +* heading: Element; +* title: Element; +* subtitle: Element; +* date: Element; +* time: Element; +* weekday: Element; +* content: Element; +* address: Element; +* }} Template +*/ + +/** @type Array<Template> */ +export const templates = []; +templates.push(verde); +templates.push(azul); diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js new file mode 100644 index 0000000..e28133a --- /dev/null +++ b/src/lib/templates/verde.js @@ -0,0 +1,103 @@ +import '$lib/templates/templates' + +/** @type {import('$lib/templates/templates').Template} */ +export const verde = { + name: "verde", + image: "imagen01.png", + heading: { + top: 300, + height: 1.2, + left: 1, + right: 1, + fontSize: 1, + color: "grey", + fontFamily: "sans-serif", + lineHeight: 1.1, + textAlign: "left", + fontWeight: 400 + }, + title: { + top: 320, + height: 6, + left: 1, + right: 1, + fontSize: 2.9, + color: "firebrick", + fontFamily: "Gill Sans, sans-serif", + lineHeight: 2.1, + textAlign: "center", + fontWeight: 400 + }, + subtitle: { + top: 420, + height: 3, + left: 1, + right: 2, + fontSize: 1.4, + color: "#787", + fontFamily: "Gill Sans, sans-serif", + lineHeight: 1.5, + textAlign: "center", + fontWeight: 400 + }, + content: { + top: 480, + height: 8.5, + left: 1.5, + right: 17, + fontSize: 0.8, + color: "#222", + fontFamily: "sans-serif", + lineHeight: 1.1, + textAlign: "left", + fontWeight: 400 + }, + date: { + top: 625, + height: 1, + left: 18.5, + right: 4, + fontSize: 1.1, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 1, + textAlign: "center", + fontWeight: 700 + }, + time: { + top: 647, + height: 2, + left: 18.5, + right: 5, + fontSize: 1.8, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 1.5, + textAlign: "center", + fontWeight: 700 + }, + weekday: { + top: 600, + height: 1.5, + left: 18.5, + right: 5, + fontSize: 1.3, + color: "#fff", + fontFamily: "sans-serif", + lineHeight: 1.8, + textAlign: "center", + fontWeight: 700 + }, + address: { + top: 625, + height: 4.5, + left: 2, + right: 20, + fontSize: 1, + color: "firebrick", + fontFamily: "sans-serif", + lineHeight: 1.5, + textAlign: "center", + fontWeight: 700 + }, +} \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8954221..70c9107 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,8 +1,5 @@ <script> - import Form from '$lib/form/Form.svelte'; - import Preview from '$lib/preview/Preview.svelte'; - - let template = 'verde'; + import { templates } from '$lib/templates/templates'; </script> <svelte:head> @@ -12,28 +9,57 @@ content="Aplicación para la generación automática de carteles de actividades de DMD" /> </svelte:head> - -<div class="main"> - <section class="form"><Form /></section> - <section class="preview"><Preview /></section> -</div> +<main> + <p>Elige la plantilla que quieras usar para tu diseño</p> + <div class="main"> + <ul> + {#each templates as template} + <li> + <a href="/{template.name}" + ><img src="/{template.image}" alt="Plantilla en blanco estilo {template.name}" /> + <div class="caption">{template.name}</div></a + > + </li> + {/each} + </ul> + </div> +</main> <style> + main { + max-width: 800px; + margin: 0 auto; + } .main { display: grid; - grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content); - grid-gap: 0.5rem; - min-height: calc(100vh - 5rem); + grid-auto-columns: 1fr; + grid-auto-rows: 1fr; + grid-gap: 1rem; + padding: 1rem 0; } - - .form { - grid-column: 1/2; - background-color: rgb(230, 240, 240); + p { + font-size: 1.5rem; } - - .preview { - grid-column: 2/3; - min-height: 200px; - background-color: rgb(240, 238, 240); + ul { + list-style: none; + } + li { + line-height: 2rem; + display: inline-block; + padding: 0.5rem; + background-color: rgb(80, 80, 80); + margin: 0 0.5rem; + } + a { + text-transform: capitalize; + cursor: pointer; + color: white; + text-decoration: none; + text-align: center; + font-weight: 700; + font-size: 1.2rem; + } + img { + max-height: 200px; } </style> diff --git a/src/routes/[slug]/+error.svelte b/src/routes/[slug]/+error.svelte new file mode 100644 index 0000000..d19e1de --- /dev/null +++ b/src/routes/[slug]/+error.svelte @@ -0,0 +1,14 @@ +<script> + import { page } from '$app/stores'; +</script> + +{#if $page.error} + <div class="error-message"><h1>{$page.status}: {$page.error.message}</h1></div> +{/if} + +<style> + .error-message { + max-width: 480px; + margin: 0 auto; + } +</style> diff --git a/src/routes/[slug]/+page.js b/src/routes/[slug]/+page.js new file mode 100644 index 0000000..54b2ce7 --- /dev/null +++ b/src/routes/[slug]/+page.js @@ -0,0 +1,21 @@ +import { error } from '@sveltejs/kit'; +import { templates } from '$lib/templates/templates'; + +/** @type {import('./$types').PageLoad} */ +export function load(event) { + + /** @type {string} */ + const slug = event.params.slug; + + /** @type {number} */ const templateIndex = templates.map((e) => e.name).indexOf(slug); + /** @type {string} */ const templateImage = templates[templateIndex].image; + if (templateIndex !== -1) { + return { + slug, + templateIndex, + templateImage + } + } + + throw error(404, "Not found"); +} diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte new file mode 100644 index 0000000..5c127ed --- /dev/null +++ b/src/routes/[slug]/+page.svelte @@ -0,0 +1,53 @@ +<script> + import { templates } from '$lib/templates/templates'; + /** + * @typedef {{ + * slug: string; + * templateIndex: number; + * templateImage: string; + * }} + * LoadFunctionData + */ + + /** @type LoadFunctionData */ export let data; + import Form from '$lib/form/Form.svelte'; + import Preview from '$lib/preview/Preview.svelte'; + + const slug = data.slug; + const templateIndex = data.templateIndex; + const templateImage = data.templateImage; +</script> + +<svelte:head> + <title>Carteles DMD - Plantilla {data.slug} + + +
+
+ + {#if templateIndex !== undefined} +
+ +
+ {/if} +
+ + diff --git a/static/azul.png b/static/azul.png new file mode 100644 index 0000000..092f5d1 Binary files /dev/null and b/static/azul.png differ