Add banner and update env variables

.forgejo/workflows/deploy.yml

@@ -20,8 +20,17 @@ jobs:
           chmod 600 ./deploy.key
           echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
 
+      - name: Create env file
+        run: |
+          touch .env
+          echo EMAIL_ACCESS_KEY=${{ secrets.EMAIL_ACCESS_KEY }} >> .env
+          echo EMAIL_BASE_URL=${{ secrets.EMAIL_BASE_URL }} >> .env
+
+      - name: Verify .env file creation
+        run: cat .env
+
       - name: Install PM2
         run: npm i -g pm2
 
       - name: Deploy
-        run: pm2 deploy ecosystem.config.cjs production
+        run: env $(cat .env | grep -v \"#\" | xargs) pm2 deploy ecosystem.config.cjs production

ecosystem.config.cjs

@@ -10,6 +10,8 @@ module.exports = {
       watch: false,
       max_memory_restart: '1G',
       env: {
+        EMAIL_ACCESS_KEY: process.env.EMAIL_ACCESS_KEY,
+        EMAIL_BASE_URL: process.env.EMAIL_BASE_URL,
         NODE_ENV: 'production',
         PORT: 7281,
       },
@@ -27,6 +29,8 @@ module.exports = {
       'post-deploy':
         'npm run build && pm2 reload ecosystem.config.cjs --only embroidery-viewer-prod --env production && pm2 save',
       env: {
+        EMAIL_ACCESS_KEY: process.env.EMAIL_ACCESS_KEY,
+        EMAIL_BASE_URL: process.env.EMAIL_BASE_URL,
         PORT: 7281,
         NODE_ENV: 'production',
       },

src/routes/+layout.svelte

@@ -28,7 +28,7 @@
 <style>
   main {
     flex: 1; /* This pushes footer to bottom */
-    padding: 20px;
+    padding: 0;
     min-height: 90vh;
   }
 </style>

src/routes/+page.js

@@ -1,3 +1,4 @@
+
 /** @type {import('./$types').PageLoad} */
 export function load() {
   return {

src/routes/+page.server.js

@@ -0,0 +1,33 @@
+import { EMAIL_ACCESS_KEY, EMAIL_BASE_URL } from '$env/static/private';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const response = await fetch(`${EMAIL_BASE_URL}/submit`, {
+			method: 'POST',
+			body: JSON.stringify({
+				accessKey: EMAIL_ACCESS_KEY,
+				subject: 'Contato - Embroidery Viewer Beta Testers!',
+				name: formData.get('name'),
+				email: formData.get('email'),
+			}),
+			headers: { 'Content-Type': 'application/json' }
+		});
+
+		const json = await response.json();
+		if (json.error === undefined) {
+			return {
+				message: 'Name and email sent successfully! We\'ll contact you soon!',
+				textColor: 'green'
+			};
+		} else {
+			return {
+				message: 'Something went wrong!',
+				textColor: 'red'
+			};
+		}
+	}
+};

src/routes/+page.svelte

@@ -1,15 +1,85 @@
 <script>
-  import Seo from '$lib/components/Seo.svelte';
+// @ts-nocheck
+
+  import { applyAction, enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
   import { t } from '$lib/translations';
 
-  /** @type {import('./$types').PageProps} */
+  import Seo from '$lib/components/Seo.svelte';
+  import appScreenshot from '$lib/assets/app-with-frame.png';
+
   let { data } = $props();
+  /**
+   * @type {{ textColor: string; message: string; } | null}
+   */
+  let feedbackMessage = $state(null);
+
+  /**
+   * @type {boolean}
+   */
+	let loading = $state(false);
 
   const metadata = data.metadata;
+
+  const resetFeedback = () => {
+    if (feedbackMessage) feedbackMessage = null
+  }
 </script>
 
 <Seo {...metadata} />
 
+<div class="beta-section">
+  <div class="beta-content">
+    <div class="beta-image">
+      <img src={appScreenshot} alt="Embroidery Viewer App Screenshot" />
+    </div>
+
+    <div class="beta-text">
+      <h1>🚀 Be a Beta Tester</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!
+      </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.
+      </p>
+
+
+      <form
+        action="/"
+        method="POST"
+        class="beta-form"
+        use:enhance={() => {
+		      loading = true;
+		      return async ({ result }) => {
+			      loading = false;
+			      feedbackMessage = result.data;
+			      if (result.type === 'success') await invalidateAll();
+			      applyAction(result);
+		      };
+	      }}>
+
+        <div class="form-header">
+          <h4>🚀 Join the Beta for Embroidery Viewer</h4>
+        </div>
+
+        <label for="name">Name</label>
+        <input type="text" name="name" id="name" oninput={resetFeedback}  required />
+
+        <label for="email">Email</label>
+        <input type="email" name="_replyto" id="email" oninput={resetFeedback}  required />
+
+        <button type="submit">{loading ? 'Sending...' : 'Join the beta'}</button>
+          {#if feedbackMessage != null}
+            <p style="margin-top: 1rem; color: {feedbackMessage.textColor}">
+            {feedbackMessage.message}
+          </p>
+        {/if}
+      </form>
+    </div>
+  </div>
+</div>
+
 <div class="home-container">
   <section aria-labelledby="main-title">
     <h1 id="main-title">{$t('home.main.title')}</h1>
@@ -51,14 +121,156 @@
 </div>
 
 <style>
+
+  .beta-form {
+    background: white;
+    color: #000;
+    padding: 1.5rem;
+    border-radius: 10px;
+    max-width: 400px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  }
+
+  .beta-form label {
+    display: block;
+    margin-top: 1rem;
+    font-weight: bold;
+  }
+
+  .beta-form input {
+    width: 100%;
+    padding: 0.6rem;
+    margin-top: 0.3rem;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+  }
+
+  .beta-form button {
+    margin-top: 1.5rem;
+    width: 100%;
+    background-color: #05345f;
+    color: white;
+    border: none;
+    padding: 0.8rem;
+    font-size: 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+
+  .beta-form button:disabled {
+    background-color: #7aa3c1;
+    cursor: wait;
+  }
+
+  .beta-form button:hover:enabled {
+    background-color: #042b4f;
+  }
   .home-container {
     margin: 0 auto;
     width: 70%;
+    padding-top: 20px;
+  }
+  strong {
+    color: white;
+    font-weight: bolder;
   }
 
   @media (max-width: 768px) {
     .home-container {
-      width: 100%;
+      width: 90%;
+    }
+  }
+    .beta-section {
+    background-color: #05345f;
+    color: white;
+    padding: 3rem 1rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .beta-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    max-width: 1000px;
+    align-items: center;
+    width: 100%;
+  }
+
+  .beta-image img {
+    max-width: 300px;
+    border-radius: 1rem;
+  }
+
+  .beta-text {
+    flex: 1;
+    min-width: 280px;
+  }
+
+  .beta-text h1 {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+    color: white;
+  }
+
+  .beta-text .lead {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    font-weight: 500;
+  }
+
+  .beta-text p {
+    margin-bottom: 1rem;
+    line-height: 1.5;
+  }
+
+  .beta-form {
+    background: white;
+    color: #000;
+    padding: 1.5rem;
+    border-radius: 10px;
+    max-width: 400px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  }
+
+  .beta-form label {
+    display: block;
+    margin-top: 1rem;
+    font-weight: bold;
+  }
+
+  .beta-form input {
+    width: 100%;
+    padding: 0.6rem;
+    margin-top: 0.3rem;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+  }
+
+  .beta-form button {
+    margin-top: 1.5rem;
+    width: 100%;
+    background-color: #05345f;
+    color: white;
+    border: none;
+    padding: 0.8rem;
+    font-size: 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+
+  .beta-form button:hover {
+    background-color: #042b4f;
+  }
+
+  @media (max-width: 768px) {
+    .beta-content {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .beta-form {
+      margin: 0 auto;
     }
   }
 </style>

src/routes/about/+page.svelte

@@ -30,7 +30,7 @@
 
   @media (max-width: 768px) {
     section {
-      width: 100%;
+      width: 90%;
     }
   }
 </style>

src/routes/donate/+page.svelte

@@ -164,7 +164,7 @@
 
   @media (max-width: 768px) {
     .donate-container {
-      width: 100%;
+      width: 90%;
     }
 
     .donation-options {

src/routes/mobile-app/privacy-policy/+page.svelte

@@ -28,7 +28,7 @@
 
   @media (max-width: 768px) {
     section {
-      width: 100%;
+      width: 90%;
     }
   }
 </style>

src/routes/privacy-policy/+page.svelte

@@ -28,7 +28,7 @@
 
   @media (max-width: 768px) {
     section {
-      width: 100%;
+      width: 90%;
     }
   }
 </style>

src/routes/terms-of-service/+page.svelte

@@ -28,7 +28,7 @@
 
   @media (max-width: 768px) {
     section {
-      width: 100%;
+      width: 90%;
     }
   }
 </style>

src/routes/viewer/+page.svelte

@@ -147,7 +147,7 @@
 
   @media only screen and (max-device-width: 768px) {
     #form {
-      width: 100%;
+      width: 90%;
     }
   }
 </style>