Spaces:

SebastianSchramm
/

cozytales

Running

App Files Files Community

SebastianSchramm commited on Jul 30, 2025

Commit

6e75715

unverified ·

1 Parent(s): c1b0c90

pimp the app

Browse files

Files changed (21) hide show

index.html +1 -1
package-lock.json +0 -0
package.json +15 -18
postcss.config.js +6 -0
public/favicon.ico +0 -0
public/index.html +0 -43
public/manifest.json +0 -25
public/vite.svg +0 -1
src/App.jsx +55 -22
src/assets/anger.png +2 -2
public/logo192.png → src/assets/anger_original.png +2 -2
src/assets/anxiety.png +2 -2
src/assets/logo.png +2 -2
public/logo512.png → src/assets/logo_v12.png +2 -2
src/assets/react.svg +0 -1
src/assets/sadness.png +2 -2
src/assets/story.png +2 -2
src/components/EmotionButton.jsx +1 -1
src/components/FlagDropdown.jsx +17 -10
src/components/StoryButton.jsx +1 -1
vite.config.js +31 -5

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/assets/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="src/assets/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>

package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -1,30 +1,27 @@
 {
   "name": "emotions",
   "private": true,
-  "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.6.0",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.30.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.11",
-    "vite": "^5.4.0"
   }
 }

 {
   "name": "emotions",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "vite",
+    "build": "vite build && cp public/_headers dist/",
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.534.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.15",
+    "jsdom": "^26.1.0",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
+    "vite": "^5.0.0",
+    "vite-plugin-pwa": "^0.16.4",
+    "vitest": "^3.2.4"
   }
 }

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/favicon.ico DELETED Viewed

Binary file (3.87 kB)

public/index.html DELETED Viewed

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json DELETED Viewed

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/vite.svg DELETED Viewed

src/App.jsx CHANGED Viewed

@@ -57,34 +57,67 @@ function App() {
   };
   return (
-    <div className="min-h-screen bg-pink-100 pt-28 pb-10 px-4 text-center relative">
-      {/* Fixed Top Banner */}
-      <div className="fixed top-0 left-0 w-full bg-pink-200 shadow-md z-10 py-3 flex justify-center items-center">
-        <img src={logo} alt="Logo" className="h-12 object-contain" />
-      </div>
-      {/* Flag Dropdown */}
-      <div className="mb-4">
-        <FlagDropdown country={country} setCountry={setCountry} />
-      </div>
-      {/* Story Button Card */}
-      <div className="bg-white rounded-2xl shadow-lg p-6 mb-6 max-w-md mx-auto w-full">
-        <h1 className="text-2xl font-bold text-purple-600 mb-4">Story Time</h1>
-        <StoryButton onClick={handleReadStory} disabled={loading} />
-      </div>
-      {/* Emotions Card */}
-      <div className="bg-white rounded-2xl shadow-lg p-6 max-w-md mx-auto w-full">
-        <h2 className="text-lg font-semibold text-purple-600 mb-4">Feeling something?</h2>
-        <div className="flex justify-center gap-4 flex-wrap">
-          <EmotionButton emotion="Anxiety" onClick={() => handleEmotion("Anxiety")} />
-          <EmotionButton emotion="Sadness" onClick={() => handleEmotion("Sadness")} />
-          <EmotionButton emotion="Anger" onClick={() => handleEmotion("Anger")} />
         </div>
       </div>
     </div>
   );
 }
-export default App;

   };
   return (
+    <div className="bg-purple-100 flex flex-col">
+{/* Fixed Top Banner */}
+<div className="fixed top-0 left-0 w-full bg-purple-200 shadow-md z-10 py-3 flex items-center justify-center relative">
+  {/* Flag Dropdown on the left with max-width 500px */}
+<div className="absolute left-4 sm:left-8 md:left-100 max-w-[100px]">
+  <FlagDropdown country={country} setCountry={setCountry} />
+</div>
+  {/* Logo centered */}
+  <img src={logo} alt="Logo" className="h-16 object-contain rounded-2xl mx-auto" />
+</div>
+      {/* Main Content - Centered */}
+      <div className="flex-1 flex py-80 justify-center items-center pt-20">
+        <div className="max-w-sm mx-auto w-full flex flex-col items-center gap-12 px-4">
+          {/* Story Button Card */}
+          <div className="bg-[#fad465]/70 rounded-2xl shadow-lg p-6 w-full">
+            <div className="flex justify-center">
+              <StoryButton onClick={handleReadStory} disabled={loading} />
+            </div>
+          </div>
+          {/* Emotions Cards - One button per card */}
+          <div className="w-full flex flex-col gap-4">
+            <div className="bg-[#d6e483]/70 rounded-2xl shadow-lg p-6 w-full">
+              <div className="flex justify-center">
+                  <EmotionButton emotion="Anxiety" onClick={() => handleEmotion("Anxiety")} />
+              </div>
+            </div>
+            <div className="bg-[#7892dd]/70 rounded-2xl shadow-lg p-6 w-full">
+              <div className="flex justify-center">
+                  <EmotionButton emotion="Sadness" onClick={() => handleEmotion("Sadness")} />
+              </div>
+            </div>
+            <div className="bg-[#f94a3f]/70 rounded-2xl shadow-lg p-6 w-full">
+              <div className="flex justify-center">
+                  <EmotionButton emotion="Anger" onClick={() => handleEmotion("Anger")} />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   );
 }
+export default App;

src/assets/anger.png CHANGED Viewed

Git LFS Details

SHA256: 9c3f8e6b3ec564564aff51f0640c87bfca0e90a044ac3c51e11f27cfac5b5f9c
Pointer size: 130 Bytes
Size of remote file: 55.4 kB

Git LFS Details

SHA256: c23b32d9cef4f4500a89bf243c06237cdf4c0ff2d6e7a5706eb2a04c6114f6c9
Pointer size: 132 Bytes
Size of remote file: 1.37 MB

public/logo192.png → src/assets/anger_original.png RENAMED Viewed

File without changes

src/assets/anxiety.png CHANGED Viewed

Git LFS Details

SHA256: 9c3f8e6b3ec564564aff51f0640c87bfca0e90a044ac3c51e11f27cfac5b5f9c
Pointer size: 130 Bytes
Size of remote file: 55.4 kB

Git LFS Details

SHA256: 6918329f5a9c6769820a549f64307cdf2799681412ecf4f94afb44a28fb4bc10
Pointer size: 132 Bytes
Size of remote file: 3.53 MB

src/assets/logo.png CHANGED Viewed

Git LFS Details

SHA256: 5789b15648389c7deacec02d2475a5f1308f66e5f01ae76f0b67d28992854d59
Pointer size: 131 Bytes
Size of remote file: 809 kB

Git LFS Details

SHA256: 87555c5f66d732459ce262d532b1b29444b54f8eef94d873238a37b2db79b24f
Pointer size: 132 Bytes
Size of remote file: 2.05 MB

public/logo512.png → src/assets/logo_v12.png RENAMED Viewed

File without changes

src/assets/react.svg DELETED Viewed

src/assets/sadness.png CHANGED Viewed

Git LFS Details

SHA256: 9c3f8e6b3ec564564aff51f0640c87bfca0e90a044ac3c51e11f27cfac5b5f9c
Pointer size: 130 Bytes
Size of remote file: 55.4 kB

Git LFS Details

SHA256: 7e8ffd7cc771a217d96b0ddcc21b71c5bc47c7817d8c0997d2504e55c99719ed
Pointer size: 132 Bytes
Size of remote file: 3.41 MB

src/assets/story.png CHANGED Viewed

Git LFS Details

SHA256: 9c3f8e6b3ec564564aff51f0640c87bfca0e90a044ac3c51e11f27cfac5b5f9c
Pointer size: 130 Bytes
Size of remote file: 55.4 kB

Git LFS Details

SHA256: c8a60309cb3e489b9b3cc799237fed44d4248d82ae929ded8993fc2518bf4657
Pointer size: 132 Bytes
Size of remote file: 3.43 MB

src/components/EmotionButton.jsx CHANGED Viewed

@@ -12,7 +12,7 @@ const EmotionButton = ({ emotion, onClick }) => {
   const img = emotionImages[emotion];
   return (
-    <button onClick={onClick} className="w-24 h-24 rounded-full overflow-hidden shadow-md hover:scale-105 transition">
       <img src={img} alt={emotion} className="w-full h-full object-cover" />
     </button>
   );

   const img = emotionImages[emotion];
   return (
+    <button onClick={onClick} className="w-40 h-40 rounded-[2.5rem] overflow-hidden shadow-md hover:scale-105 transition">
       <img src={img} alt={emotion} className="w-full h-full object-cover" />
     </button>
   );

src/components/FlagDropdown.jsx CHANGED Viewed

@@ -1,8 +1,9 @@
 import { useState } from "react";
 import usaFlag from "../assets/usa.png";
 import costaRicaFlag from "../assets/costa_rica.png";
-// Include the language code for each country
 const countries = [
   { name: "USA", flag: usaFlag, language: "en" },
   { name: "Costa Rica", flag: costaRicaFlag, language: "es" },
@@ -10,32 +11,38 @@ const countries = [
 const FlagDropdown = ({ country, setCountry }) => {
   const [isOpen, setIsOpen] = useState(false);
-  // Match by country name
   const selected = countries.find((c) => c.name === country.name) || countries[0];
   const toggleDropdown = () => setIsOpen(!isOpen);
   const selectCountry = (countryObj) => {
-    setCountry(countryObj); // Pass full object including language
     setIsOpen(false);
   };
   return (
-    <div className="relative inline-block">
-      <button onClick={toggleDropdown} className="p-1 border rounded">
-        <img src={selected.flag} className="w-10 h-6 sm:w-12 sm:h-8 rounded shadow" />
       </button>
       {isOpen && (
-        <div className="absolute mt-2 bg-white border rounded shadow-md z-10">
           {countries.map((c) => (
             <div
               key={c.name}
               onClick={() => selectCountry(c)}
-              className="cursor-pointer hover:bg-gray-100 p-1"
             >
-              <img src={c.flag} alt={c.name} className="w-10 h-6" />
             </div>
           ))}
         </div>

 import { useState } from "react";
+import { ChevronDown } from "lucide-react"; // Optional for dropdown icon
 import usaFlag from "../assets/usa.png";
 import costaRicaFlag from "../assets/costa_rica.png";
+// Country data
 const countries = [
   { name: "USA", flag: usaFlag, language: "en" },
   { name: "Costa Rica", flag: costaRicaFlag, language: "es" },
 const FlagDropdown = ({ country, setCountry }) => {
   const [isOpen, setIsOpen] = useState(false);
   const selected = countries.find((c) => c.name === country.name) || countries[0];
   const toggleDropdown = () => setIsOpen(!isOpen);
   const selectCountry = (countryObj) => {
+    setCountry(countryObj);
     setIsOpen(false);
   };
   return (
+    <div className="relative inline-block w-16 ">
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center justify-center w-full p-1.5 border border-gray-300 rounded-lg shadow-sm bg-white hover:border-gray-400"
+      >
+        <img
+          src={selected.flag}
+          className="w-8 h-4 sm:h-6 rounded min-h-[30px]"
+          alt={selected.name}
+        />
+        <ChevronDown className="w-4 h-4 ml-1 text-gray-600" />
       </button>
       {isOpen && (
+        <div className="absolute mt-1 w-full bg-white border border-gray-300 rounded-lg shadow-md z-10">
           {countries.map((c) => (
             <div
               key={c.name}
               onClick={() => selectCountry(c)}
+              className="flex justify-center p-2 cursor-pointer hover:bg-gray-100"
             >
+              <img src={c.flag} alt={c.name} className="h-4 w-6 sm:h-5 sm:w-8 rounded-sm" />
             </div>
           ))}
         </div>

src/components/StoryButton.jsx CHANGED Viewed

@@ -3,7 +3,7 @@ import readStoryImg from "../assets/story.png";
 const StoryButton = ({ onClick }) => (
   <button
     onClick={onClick}
-    className="w-40 h-40 sm:w-48 sm:h-48 rounded-full overflow-hidden shadow-lg hover:scale-105 transition"
   >
     <img src={readStoryImg} alt="Read a story" className="w-full h-full object-contain" />
   </button>

 const StoryButton = ({ onClick }) => (
   <button
     onClick={onClick}
+    className="w-40 h-40 sm:w-48 sm:h-48 rounded-[3rem] overflow-hidden shadow-lg hover:scale-105 transition"
   >
     <img src={readStoryImg} alt="Read a story" className="w-full h-full object-contain" />
   </button>

vite.config.js CHANGED Viewed

@@ -1,7 +1,33 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.ico', 'icon-192.png', 'icon-512.png'],
+      manifest: {
+        name: "Emotions",
+        short_name: "Emotions",
+        theme_color: "#1A4FA3",
+        background_color: "#ffffff",
+        display: "standalone",
+        start_url: ".",
+        icons: [
+          {
+            src: "icon-192.png",
+            sizes: "192x192",
+            type: "image/png"
+          },
+          {
+            src: "icon-512.png",
+            sizes: "512x512",
+            type: "image/png"
+          }
+        ]
+      }
+    })
+  ]
+});