leomurca/embroidery-viewer
leomurca/embroidery-viewer
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Add banner to ask users to be a beta tester #32

Merged
leomurca merged 3 commits from calling-testers into main 2025-07-13 19:53:47 +00:00
Conversation 0 Commits 3 Files changed 16 +38 -20
5 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit dd6f90a622 - Show all commits

BIN
src/lib/assets/app-with-frame-pt.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

11
src/lib/translations/en-US/home.json
View file

@ -18,5 +18,14 @@
"seo.description": "Upload and preview embroidery files instantly with Embroidery Viewer. Supports DST, PES, JEF, EXP, VP3 and more. No installs, no uploads – 100% browser-based and free.",
"seo.keywords": "embroidery viewer, online embroidery viewer, embroidery file preview, DST viewer, PES viewer, free embroidery tool, JEF viewer, EXP embroidery, VP3 embroidery viewer, embroidery preview tool, browser embroidery renderer, convert embroidery to PNG",
"seo.url": "https://embroideryviewer.xyz",
"seo.image": "https://embroideryviewer.xyz/og/"
"seo.image": "https://embroideryviewer.xyz/og/",
"banner.title": "🚀 Be a Beta Tester",
"banner.subtitle": "We’re launching the <strong style=\"color: white\">Embroidery Viewer Android App </strong> — and you can be one of the first to try it!",
"banner.description": "Enjoy a smooth, ad-free experience to visualize PES, JEF, PEC, and VP3 embroidery files right from your phone. Help us improve it and get early access before everyone else.",
"banner.name": "Name",
"banner.email": "Email",
"banner.cta": "Join the Beta",
"banner.cta.loading": "Joining...",
"banner.feedback.success": "Name and email sent successfully! We'll contact you soon!",
"banner.feedback.error": "Something went wrong. Try sending you name and e-mail directly to leo@leomurca.xyz."
}

11
src/lib/translations/pt-BR/home.json
View file

@ -18,5 +18,14 @@
"seo.description": "Envie e visualize arquivos de bordado instantaneamente com o Embroidery Viewer. Compatível com DST, PES, JEF, EXP, VP3 e mais. Sem instalações, sem uploads – 100% no navegador e gratuito.",
"seo.keywords": "visualizador de bordado, visualizador online de bordado, visualizar arquivos de bordado, visualizar DST, visualizar PES, ferramenta gratuita de bordado, visualizador JEF, bordado EXP, visualizador VP3, pré-visualização de bordado, renderizador de bordado no navegador, converter bordado em PNG",
"seo.url": "https://embroideryviewer.xyz",
"seo.image": "https://embroideryviewer.xyz/og/"
"seo.image": "https://embroideryviewer.xyz/og/",
"banner.title": "🚀 Seja um Testador Beta",
"banner.subtitle": "Estamos lançando o aplicativo <strong style=\"color: white\">Embroidery Viewer para Android</strong> — e você pode ser um dos primeiros a experimentá-lo!",
"banner.description": "Desfrute de uma experiência fluida e sem anúncios para visualizar arquivos de bordado PES, JEF, PEC e VP3 diretamente do seu celular. Ajude-nos a melhorá-lo e obtenha acesso antecipado antes de todo mundo.",
"banner.name": "Nome",
"banner.email": "Email",
"banner.cta": "Seja um Testador",
"banner.cta.loading": "Enviando...",
"banner.feedback.success": "Nome e e-mail enviados com sucesso! Entraremos em contato em breve!",
"banner.feedback.error": "Algo deu errado. Tente enviar seu nome e e-mail diretamente para leo@leomurca.xyz."
}

5
src/routes/+page.server.js
View file

@ -1,5 +1,6 @@
import { EMAIL_ACCESS_KEY, EMAIL_BASE_URL } from '$env/static/private';
/** @type {import('./$types').Actions} */
export const actions = {
default: async ({ request }) => {
@ -20,12 +21,12 @@ export const actions = {
const json = await response.json();
if (json.error === undefined) {
return {
message: 'Name and email sent successfully! We\'ll contact you soon!',
message: "home.banner.feedback.success",
textColor: 'green'
};
} else {
return {
message: 'Something went wrong!',
message: 'home.banner.feedback.error',
textColor: 'red'
};
}

31
src/routes/+page.svelte
View file

@ -3,14 +3,16 @@
import { applyAction, enhance } from '$app/forms';
import { invalidateAll } from '$app/navigation';
import { t } from '$lib/translations';
import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
import Seo from '$lib/components/Seo.svelte';
import appScreenshot from '$lib/assets/app-with-frame.png';
import appScreenshotPt from '$lib/assets/app-with-frame-pt.png';
import { browser } from '$app/environment';
let { data } = $props();
/**
* @type {{ textColor: string; message: string; } | null}
* @type {{ textColor: String; message: String; } | null}
*/
let feedbackMessage = $state(null);
@ -24,6 +26,7 @@
const resetFeedback = () => {
if (feedbackMessage) feedbackMessage = null
}
</script>
<Seo {...metadata} />
@ -31,17 +34,17 @@
<div class="beta-section">
<div class="beta-content">
<div class="beta-image">
<img src={appScreenshot} alt="Embroidery Viewer App Screenshot" />
<img src={$locale === SUPPORTED_LOCALES.EN_US ? appScreenshot : appScreenshotPt} alt="Embroidery Viewer App Screenshot" />
</div>
<div class="beta-text">
<h1>🚀 Be a Beta Tester</h1>
<h1>{$t("home.banner.title")}</h1>
<p class="lead">
We’re launching the <strong>Embroidery Viewer Android App</strong> — and you can be one of the first to try it!
{@html $t('home.banner.subtitle')}
</p>
<p>
Enjoy a smooth, ad-free experience to visualize PES, JEF, PEC, and VP3 embroidery files right from your phone.
Help us improve it and get early access before everyone else.
{$t('home.banner.description')}
</p>
@ -59,16 +62,16 @@
};
}}>
<label for="name">Name</label>
<label for="name">{$t("home.banner.name")}</label>
<input type="text" name="name" id="name" oninput={resetFeedback} required />
<label for="email">Email</label>
<label for="email">{$t("home.banner.email")}</label>
<input type="email" name="_replyto" id="email" oninput={resetFeedback} required />
<button type="submit">{loading ? 'Sending...' : 'Join the beta'}</button>
{#if feedbackMessage != null}
<button type="submit">{$t(loading ? 'home.banner.cta.loading' : 'home.banner.cta') }</button>
{#if feedbackMessage !== null}
<p style="margin-top: 1rem; color: {feedbackMessage.textColor}">
{feedbackMessage.message}
{$t(feedbackMessage.message)}
</p>
{/if}
</form>
@ -166,10 +169,6 @@
width: 70%;
padding-top: 20px;
}
strong {
color: white;
font-weight: bolder;
}
@media (max-width: 768px) {
.home-container {