- Added text to home page

- Added feedback form
2025-08-11 02:42:16 +02:00
parent f8d9d2ae83
commit 5c302277be
5 changed files with 162 additions and 28 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
        "jszip": "^3.10.1",
        "marked": "^15.0.7",
        "pinia": "^3.0.1",
+        "pocketbase": "^0.26.2",
        "vue": "^3.5.13"
      },
      "devDependencies": {
@@ -2024,28 +2025,28 @@
      }
    },
    "node_modules/@vue/babel-helper-vue-transform-on": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.4.0.tgz",
-      "integrity": "sha512-mCokbouEQ/ocRce/FpKCRItGo+013tHg7tixg3DUNS+6bmIchPt66012kBMm476vyEIJPafrvOf4E5OYj3shSw==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz",
+      "integrity": "sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/@vue/babel-plugin-jsx": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.4.0.tgz",
-      "integrity": "sha512-9zAHmwgMWlaN6qRKdrg1uKsBKHvnUU+Py+MOCTuYZBoZsopa90Di10QRjB+YPnVss0BZbG/H5XFwJY1fTxJWhA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.5.0.tgz",
+      "integrity": "sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/helper-module-imports": "^7.25.9",
-        "@babel/helper-plugin-utils": "^7.26.5",
-        "@babel/plugin-syntax-jsx": "^7.25.9",
-        "@babel/template": "^7.26.9",
-        "@babel/traverse": "^7.26.9",
-        "@babel/types": "^7.26.9",
-        "@vue/babel-helper-vue-transform-on": "1.4.0",
-        "@vue/babel-plugin-resolve-type": "1.4.0",
-        "@vue/shared": "^3.5.13"
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.2",
+        "@vue/babel-helper-vue-transform-on": "1.5.0",
+        "@vue/babel-plugin-resolve-type": "1.5.0",
+        "@vue/shared": "^3.5.18"
      },
      "peerDependencies": {
        "@babel/core": "^7.0.0-0"
@@ -2057,17 +2058,17 @@
      }
    },
    "node_modules/@vue/babel-plugin-resolve-type": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.4.0.tgz",
-      "integrity": "sha512-4xqDRRbQQEWHQyjlYSgZsWj44KfiF6D+ktCuXyZ8EnVDYV3pztmXJDf1HveAjUAXxAnR8daCQT51RneWWxtTyQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.5.0.tgz",
+      "integrity": "sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/helper-module-imports": "^7.25.9",
-        "@babel/helper-plugin-utils": "^7.26.5",
-        "@babel/parser": "^7.26.9",
-        "@vue/compiler-sfc": "^3.5.13"
+        "@babel/code-frame": "^7.27.1",
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/parser": "^7.28.0",
+        "@vue/compiler-sfc": "^3.5.18"
      },
      "funding": {
        "url": "https://github.com/sponsors/sxzz"
@@ -2399,9 +2400,9 @@
      }
    },
    "node_modules/browserslist": {
-      "version": "4.25.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
-      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
+      "version": "4.25.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.2.tgz",
+      "integrity": "sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==",
      "dev": true,
      "funding": [
        {
@@ -2419,8 +2420,8 @@
      ],
      "license": "MIT",
      "dependencies": {
-        "caniuse-lite": "^1.0.30001726",
-        "electron-to-chromium": "^1.5.173",
+        "caniuse-lite": "^1.0.30001733",
+        "electron-to-chromium": "^1.5.199",
        "node-releases": "^2.0.19",
        "update-browserslist-db": "^1.1.3"
      },
@@ -3793,6 +3794,12 @@
        }
      }
    },
+    "node_modules/pocketbase": {
+      "version": "0.26.2",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.26.2.tgz",
+      "integrity": "sha512-WA8EOBc3QnSJh8rJ3iYoi9DmmPOMFIgVfAmIGux7wwruUEIzXgvrO4u0W2htfQjGIcyezJkdZOy5Xmh7SxAftw==",
+      "license": "MIT"
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "jszip": "^3.10.1",
    "marked": "^15.0.7",
    "pinia": "^3.0.1",
+    "pocketbase": "^0.26.2",
    "vue": "^3.5.13"
  },
  "devDependencies": {
--- a/public/CHANGELOG.md
+++ b/public/CHANGELOG.md
@@ -1,5 +1,9 @@
 All notable changes to this project will be documented in this file.

+## [1.2.0] - 2025-09-11
+- Added text to home page
+- Added feedback form
+
 ## [1.2.0] - 2025-09-08
 - Fixed splitter logic
 - Fixed minor bugs
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@
        <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors" data-rybbit-event="source-link"> <i class="fab fa-github"></i> Source </a>
        <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors" data-rybbit-event="discord-link"> <i class="fab fa-discord"></i> Discord </a>
        <a href="#" @click.prevent="openHelpModal" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors" data-rybbit-event="help-link"> <i class="fas fa-question-circle"></i> Help </a>
+        <a href="#" @click.prevent="openFeedbackModal" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors" data-rybbit-event="feedback-link"> <i class="fas fa-comment-dots"></i> Feedback </a>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft dark:shadow-gray-900/30 p-4 sm:p-8 transition-colors duration-300">
@@ -25,6 +26,12 @@
        </div>
        <file-uploader @upload-sprites="handleSpritesUpload" />
        <input ref="jsonFileInput" type="file" accept=".json,application/json" class="hidden" @change="handleJSONFileChange" />
+        <div v-if="!sprites.length" class="mt-8">
+          <div class="mt-2 leading-relaxed space-y-2">
+            <p>Create spritesheets for your game development and animation projects with our completely free, open-source spritesheet generator.</p>
+            <p>This powerful online tool lets you upload individual sprite images and automatically arrange them into optimized sprite sheets with customizable layouts - perfect for indie developers, animators, and studios of any size.</p>
+          </div>
+        </div>

        <div v-if="sprites.length > 0" class="mt-8">
          <div class="flex flex-wrap items-center justify-center sm:justify-start gap-3 sm:gap-6 mb-6 sm:mb-8">
@@ -102,6 +109,7 @@
    </Modal>

    <HelpModal :is-open="isHelpModalOpen" @close="closeHelpModal" />
+    <FeedbackModal :is-open="isFeedbackModalOpen" @close="closeFeedbackModal" />
    <SpritesheetSplitter :is-open="isSpritesheetSplitterOpen" :image-url="spritesheetImageUrl" :image-file="spritesheetImageFile" @close="closeSpritesheetSplitter" @split="handleSplitSpritesheet" />
    <GifFpsModal :is-open="isGifFpsModalOpen" @close="closeGifFpsModal" @confirm="downloadAsGif" :default-fps="10" />
  </div>
@@ -114,6 +122,7 @@
  import Modal from './components/utilities/Modal.vue';
  import SpritePreview from './components/SpritePreview.vue';
  import HelpModal from './components/HelpModal.vue';
+  import FeedbackModal from './components/FeedbackModal.vue';
  import SpritesheetSplitter from './components/SpritesheetSplitter.vue';
  import GifFpsModal from './components/GifFpsModal.vue';
  import DarkModeToggle from './components/utilities/DarkModeToggle.vue';
@@ -150,6 +159,7 @@
  });
  const isPreviewModalOpen = ref(false);
  const isHelpModalOpen = ref(false);
+  const isFeedbackModalOpen = ref(false);
  const isSpritesheetSplitterOpen = ref(false);
  const isGifFpsModalOpen = ref(false);
  const jsonFileInput = ref<HTMLInputElement | null>(null);
@@ -297,6 +307,15 @@
    isHelpModalOpen.value = false;
  };

+  // Feedback modal control
+  const openFeedbackModal = () => {
+    isFeedbackModalOpen.value = true;
+  };
+
+  const closeFeedbackModal = () => {
+    isFeedbackModalOpen.value = false;
+  };
+
  // Spritesheet splitter modal control
  const closeSpritesheetSplitter = () => {
    isSpritesheetSplitterOpen.value = false;
--- a/src/components/FeedbackModal.vue
+++ b/src/components/FeedbackModal.vue
@@ -0,0 +1,103 @@
+<template>
+  <Modal :is-open="isOpen" @close="close" title="Send feedback" :initialWidth="700" :initialHeight="520">
+    <form class="h-full flex flex-col" @submit.prevent="submit" novalidate>
+      <div class="flex-1 overflow-auto p-4 space-y-4 dark:bg-gray-800">
+        <p class="text-sm text-gray-600 dark:text-gray-300">We’d love to hear your thoughts. Only the fields below are required and will be sent securely.</p>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-name">Name</label>
+            <input id="fb-name" v-model="name" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder="Jane Doe" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-contact">Contact</label>
+            <input id="fb-contact" v-model="contact" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder="email, matrix, discord, etc." />
+          </div>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-content">Content</label>
+          <textarea
+            id="fb-content"
+            v-model="content"
+            rows="6"
+            class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+            placeholder="Describe your feedback here..."
+            required
+          ></textarea>
+        </div>
+
+        <p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+        <p v-if="success" class="text-sm text-green-600 dark:text-green-400">{{ success }}</p>
+      </div>
+
+      <div class="border-t border-gray-200 dark:border-gray-700 p-3 flex justify-end gap-2">
+        <button type="button" class="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100" @click="close" :disabled="loading">Close</button>
+        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-60 disabled:cursor-not-allowed" :disabled="loading">
+          <span v-if="!loading">Send feedback</span>
+          <span v-else>Sending…</span>
+        </button>
+      </div>
+    </form>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import Modal from './utilities/Modal.vue';
+
+  const props = defineProps<{ isOpen: boolean }>();
+  const emit = defineEmits<{ (e: 'close'): void }>();
+
+  const name = ref('');
+  const contact = ref('');
+  const content = ref('');
+  const loading = ref(false);
+  const error = ref('');
+  const success = ref('');
+
+  const close = () => emit('close');
+
+  const submit = async () => {
+    error.value = '';
+    success.value = '';
+    if (!content.value.trim()) {
+      error.value = 'Please enter some feedback (content).';
+      return;
+    }
+
+    loading.value = true;
+    try {
+      const res = await fetch('https://pb1.adhd.sh/api/collections/feedback/records', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: name.value || null,
+          contact: contact.value || null,
+          content: content.value,
+        }),
+      });
+
+      if (!res.ok) {
+        const text = await res.text().catch(() => '');
+        throw new Error(text || `Request failed with status ${res.status}`);
+      }
+
+      success.value = 'Thank you! Your feedback was sent.';
+      // Reset fields
+      name.value = '';
+      contact.value = '';
+      content.value = '';
+
+      // Optionally close after short delay
+      setTimeout(() => close(), 600);
+    } catch (e: any) {
+      console.error('Failed to send feedback:', e);
+      error.value = 'Failed to send feedback. Please try again later.';
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>