Click to upload or drag and drop to extract message
PNG format only
" - }, - "downloadimagebutton": { - "tooltip": { - "title": "Download image", - "hint": "Enter a message before saving to disk" + "title": "stegg", + "description": { + "intro": "This is a full-stack React application written in Typescript.", + "howitworks": "How it works:", + "paragraph1": "This app takes the text input from Encrypt field and writes it to the metadata of a newly created PNG file that is generated from the Canvas. The canvas image depicts the message as binary data: nodes that are filled represent 1's and nodes that are outlined represent 0's. If someone was patient enough, they could translate the message back to text just by interpreting the image as unicode values. That's why there is aClick to upload or drag and drop to extract message
PNG format only
" + }, + "downloadimagebutton": { + "tooltip": { + "title": "Download image", + "hint": "Enter a message before saving to disk" + }, + "label": "Download" + }, + "nodesize": { + "label": "Node size" + }, + "password": { + "hint": "Enter a secret key", + "enable": "Enable encryption", + "tooltip": { + "content": "Enable AES 128-bit encryption" + } }, - "tooltip": { - "posttofeed": "Post image to the feed", - "entermessage": "Please enter a message and password before posting" + "post": { + "posted": "Posted" }, - "label": "Post" - }, - "feed": { - "title": "Public steggs", - "loadmore": "Load more" - }, - "footer": { - "rights": "All rights reserved", - "license": "Released under the" - }, - "instructions": "Instructions", - "how-it-works": "How it works" -} \ No newline at end of file + "postimagebutton": { + "toast": { + "processing": "Processing image...", + "embedding": "Embedding metadata...", + "size": "Determining the size of the image...", + "presignedpayload": "Getting presigned post payload...", + "uploading": "Uploading to S3 bucket...", + "createimage": "Creating binary feed image...", + "createimagepost": "Creating binary image post...", + "publishing": "Binary image post created.", + "success": "Image uploaded successfully!", + "noencryption": "Encryption disabled. Only encrypted messages can be posted.", + "nocanvasorinput": "No image to upload." + }, + "tooltip": { + "posttofeed": "Post image to the feed", + "entermessage": "Please enter a message and password before posting" + }, + "label": "Post" + }, + "feed": { + "title": "Public steggs", + "loadmore": "Load more" + }, + "footer": { + "rights": "All rights reserved", + "license": "Released under the" + }, + "instructions": "Instructions", + "how-it-works": "How it works", + "make-something": "make something", + "acknowledgements": { + "title": "Acknowledgements", + "paragraph1": "This app would not have been possible without the following open source projects and libraries:" + } +} diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index 1b688b9..088f56e 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -1,90 +1,95 @@ { - "menu": { - "home": "Inicio", - "about": "Acerca de esta app", - "faq": "Preguntas frecuentes" - }, - "title": "stegg", - "description": { - "intro": "Esta es una aplicación full-stack de React escrita en Typescript.", - "howitworks": "Cómo funciona:", - "paragraph1": "Esta aplicación toma el texto ingresado en el campo Cifrar y lo escribe en los metadatos de un archivo PNG recién creado, generado a partir del Canvas. La imagen del canvas representa el mensaje como datos binarios: los nodos rellenos representan 1's y los nodos delineados representan 0's. Si alguien tuviera suficiente paciencia, podría traducir el mensaje de nuevo a texto simplemente interpretando la imagen como valores unicode. Es por eso que hay unHaz clic para subir o arrastra y suelta para extraer el mensaje
Solo formato PNG
" - }, - "downloadimagebutton": { - "tooltip": { - "title": "Descargar imagen", - "hint": "Ingresa un mensaje antes de guardar en el disco" + "title": "stegg", + "description": { + "intro": "Esta es una aplicación full-stack de React escrita en Typescript.", + "howitworks": "Cómo funciona:", + "paragraph1": "Esta aplicación toma el texto ingresado en el campo Cifrar y lo escribe en los metadatos de un archivo PNG recién creado, generado a partir del Canvas. La imagen del canvas representa el mensaje como datos binarios: los nodos rellenos representan 1's y los nodos delineados representan 0's. Si alguien tuviera suficiente paciencia, podría traducir el mensaje de nuevo a texto simplemente interpretando la imagen como valores unicode. Es por eso que hay unHaz clic para subir o arrastra y suelta para extraer el mensaje
Solo formato PNG
" + }, + "downloadimagebutton": { + "tooltip": { + "title": "Descargar imagen", + "hint": "Ingresa un mensaje antes de guardar en el disco" + }, + "label": "Descargar" + }, + "nodesize": { + "label": "Tamaño del nodo" + }, + "password": { + "hint": "Introduce una clave secreta", + "enable": "Habilitar cifrado", + "tooltip": { + "content": "Habilitar cifrado AES de 128 bits" + } }, - "tooltip": { - "posttofeed": "Publicar imagen en el feed", - "entermessage": "Por favor, ingresa un mensaje y una contraseña antes de publicar" + "post": { + "posted": "Publicado" }, - "label": "Publicar" - }, - "feed": { - "title": "Stegg públicos", - "loadmore": "Cargar más" - }, - "footer": { - "rights": "Todos los derechos reservados", - "license": "Publicado bajo la" - }, - "instructions": "Instrucciones", - "how-it-works": "Cómo functiona" -} \ No newline at end of file + "postimagebutton": { + "toast": { + "processing": "Procesando imagen...", + "embedding": "Incorporando metadatos...", + "size": "Determinando el tamaño de la imagen...", + "presignedpayload": "Obteniendo la carga útil del post firmado...", + "uploading": "Subiendo al bucket S3...", + "createimage": "Creando imagen binaria del feed...", + "createimagepost": "Creando post de imagen binaria...", + "publishing": "Post de imagen binaria creado.", + "success": "¡Imagen subida con éxito!", + "noencryption": "Cifrado deshabilitado. Solo los mensajes cifrados pueden ser publicados.", + "nocanvasorinput": "No hay imagen para subir." + }, + "tooltip": { + "posttofeed": "Publicar imagen en el feed", + "entermessage": "Por favor, ingresa un mensaje y una contraseña antes de publicar" + }, + "label": "Publicar" + }, + "feed": { + "title": "Stegg públicos", + "loadmore": "Cargar más" + }, + "footer": { + "rights": "Todos los derechos reservados", + "license": "Publicado bajo la" + }, + "instructions": "Instrucciones", + "how-it-works": "Cómo functiona", + "make-something": "crear algo", + "acknowledgements": { + "title": "Agradecimientos", + "paragraph1": "Esta aplicación no habría sido posible sin las siguientes bibliotecas y proyectos de código abierto:" + } +} diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index d8c3d80..8fd01eb 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -1,90 +1,95 @@ { - "menu": { - "home": "Accueil", - "about": "À propos de cette app", - "faq": "FAQ" - }, - "title": "stegg", - "description": { - "intro": "Ceci est une application full-stack React écrite en Typescript.", - "howitworks": "Comment ça fonctionne :", - "paragraph1": "Cette application prend le texte saisi dans le champ Chiffrer et l'écrit dans les métadonnées d'un fichier PNG nouvellement créé, généré à partir de la Canvas. L'image du canvas représente le message sous forme de données binaires : les nœuds remplis représentent des 1 et les nœuds délimités représentent des 0. Si quelqu'un était assez patient, il pourrait traduire le message en texte simplement en interprétant l'image comme des valeurs unicode. C'est pourquoi il y a unCliquez pour télécharger ou glissez-déposez pour extraire le message
Format PNG uniquement
" - }, - "downloadimagebutton": { - "tooltip": { - "title": "Télécharger l'image", - "hint": "Entrez un message avant de sauvegarder sur le disque" + "title": "stegg", + "description": { + "intro": "Ceci est une application full-stack React écrite en Typescript.", + "howitworks": "Comment ça fonctionne :", + "paragraph1": "Cette application prend le texte saisi dans le champ Chiffrer et l'écrit dans les métadonnées d'un fichier PNG nouvellement créé, généré à partir de la Canvas. L'image du canvas représente le message sous forme de données binaires : les nœuds remplis représentent des 1 et les nœuds délimités représentent des 0. Si quelqu'un était assez patient, il pourrait traduire le message en texte simplement en interprétant l'image comme des valeurs unicode. C'est pourquoi il y a unCliquez pour télécharger ou glissez-déposez pour extraire le message
Format PNG uniquement
" + }, + "downloadimagebutton": { + "tooltip": { + "title": "Télécharger l'image", + "hint": "Entrez un message avant de sauvegarder sur le disque" + }, + "label": "Télécharger" + }, + "nodesize": { + "label": "Taille du nœud" + }, + "password": { + "hint": "Entrez une clé secrète", + "enable": "Activer le chiffrement", + "tooltip": { + "content": "Activer le chiffrement AES 128 bits" + } }, - "tooltip": { - "posttofeed": "Poster l'image sur le feed", - "entermessage": "Veuillez entrer un message et un mot de passe avant de poster" + "post": { + "posted": "Posté" }, - "label": "Poster" - }, - "feed": { - "title": "Stegg publiques ", - "loadmore": "Charger plus" - }, - "footer": { - "rights": "Tous droits réservés", - "license": "Publié sous la" - }, - "instructions": "Instructions", - "how-it-works": "Comment ça marche" -} \ No newline at end of file + "postimagebutton": { + "toast": { + "processing": "Traitement de l'image...", + "embedding": "Incorporation des métadonnées...", + "size": "Détermination de la taille de l'image...", + "presignedpayload": "Récupération de la charge utile de post signé...", + "uploading": "Téléchargement dans le bucket S3...", + "createimage": "Création de l'image binaire du feed...", + "createimagepost": "Création du post d'image binaire...", + "publishing": "Post d'image binaire créé.", + "success": "Image téléchargée avec succès !", + "noencryption": "Chiffrement désactivé. Seuls les messages chiffrés peuvent être postés.", + "nocanvasorinput": "Aucune image à télécharger." + }, + "tooltip": { + "posttofeed": "Poster l'image sur le feed", + "entermessage": "Veuillez entrer un message et un mot de passe avant de poster" + }, + "label": "Poster" + }, + "feed": { + "title": "Stegg publiques ", + "loadmore": "Charger plus" + }, + "footer": { + "rights": "Tous droits réservés", + "license": "Publié sous la" + }, + "instructions": "Instructions", + "how-it-works": "Comment ça marche", + "make-something": "créer quelque chose", + "acknowledgements": { + "title": "Remerciements", + "paragraph1": "Cette application n'aurait pas été possible sans les projets et bibliothèques open source suivants:" + } +} diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx index 3ff8700..1e49fdf 100644 --- a/src/components/Menu.tsx +++ b/src/components/Menu.tsx @@ -141,12 +141,12 @@ const Menu: React.FC = () => { g g -make something
+{t('make-something')}
diff --git a/src/index.css b/src/index.css index 7ed058d..ae7725d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,75 +1,78 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - --toastify-color-light: #fff; - --toastify-color-dark: #1D293B; - --toastify-color-info: #aaddcc; - --toastify-color-success: #aabb99; - --toastify-color-warning: #ff8866; - --toastify-color-error: #ccaabb; - --toastify-color-transparent: rgba(255, 255, 255, 0.7); + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + --toastify-color-light: #fff; + --toastify-color-dark: #1d293b; + --toastify-color-info: #aaddcc; + --toastify-color-success: #aabb99; + --toastify-color-warning: #ff8866; + --toastify-color-error: #ccaabb; + --toastify-color-transparent: rgba(255, 255, 255, 0.7); - --toastify-icon-color-info: var(--toastify-color-info); - --toastify-icon-color-success: var(--toastify-color-success); - --toastify-icon-color-warning: var(--toastify-color-warning); - --toastify-icon-color-error: var(--toastify-color-error); - --toastify-toast-border-radius: 10px; - --toastify-toast-border-width: 1px; - --toastify-toast-border-color: #fff; + --toastify-icon-color-info: var(--toastify-color-info); + --toastify-icon-color-success: var(--toastify-color-success); + --toastify-icon-color-warning: var(--toastify-color-warning); + --toastify-icon-color-error: var(--toastify-color-error); + --toastify-toast-border-radius: 10px; + --toastify-toast-border-width: 1px; + --toastify-toast-border-color: #fff; } body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; } @layer components { - input[type=range] { - @apply appearance-none bg-transparent; - } - - input[type=range]::-webkit-slider-runnable-track { - @apply bg-seablue/25 rounded-full; - } + input[type="range"] { + @apply appearance-none bg-transparent; + } - input[type=range]::-moz-range-track { - @apply bg-seablue/25 rounded-full; - } + input[type="range"]::-webkit-slider-runnable-track { + @apply rounded-full bg-seablue/25; + } - input[type=range]::-ms-track { - @apply bg-seablue/25 rounded-full; - } + input[type="range"]::-moz-range-track { + @apply rounded-full bg-seablue/25; + } - input[type="range"]::-moz-range-progress { - @apply bg-seablue/25 rounded-full; - } + input[type="range"]::-ms-track { + @apply rounded-full bg-seablue/25; + } - input[type="range"]::-moz-range-thumb { - @apply w-4 h-4 bg-seablue rounded-full; - } + input[type="range"]::-moz-range-progress { + @apply rounded-full bg-seablue/25; + } - input[type="range"]::-webkit-slider-thumb { - @apply w-4 h-4 bg-seablue rounded-full; - } + input[type="range"]::-moz-range-thumb { + @apply h-4 w-4 rounded-full bg-seablue; + } + input[type="range"]::-webkit-slider-thumb { + @apply h-4 w-4 rounded-full bg-seablue; + } } .Toastify__toast { - border: 2px solid #99aabb; + border: 2px solid #99aabb; } -@tailwind base; -@tailwind components; -@tailwind utilities; \ No newline at end of file +#content-wrapper { + overflow: hidden; +} diff --git a/src/main.tsx b/src/main.tsx index 3e2213d..b1f843f 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -74,8 +74,6 @@ const client = new ApolloClient({ cache }); -const publicUrl = import.meta.env.VITE_PUBLIC_URL; -console.log("publicUrl", publicUrl); createRoot(document.getElementById('root')!).render({t('description.intro')}
+{t('description.howitworks')}
+ {t('acknowledgements.paragraph1')} +
++
+
+ {JSON.stringify(dependencies, null, 2)}
+
+
+
+ Click on the "How it Works" tab to see how to use the image generator.