frontend steps

frontend/src/app/about/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const AboutPage: React.FC = () => {
+    return (
+        <div className="container mx-auto px-4 py-8">
+            <h1 className="text-3xl font-bold mb-4">About Digital Memory Playground</h1>
+            <p className="text-lg mb-4">
+                Digital Memory Playground is designed to enhance memory and cognitive skills through interactive and themed exercises.
+            </p>
+            <p className="text-lg">
+                Whether you're in the Kitchen, Farm, Library, or Office, Digital Memory Playground offers enjoyable and stimulating challenges to keep your mind sharp.
+            </p>
+        </div>
+    );
+};
+
+export default AboutPage;

frontend/src/app/displayimages/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+const DisplayImagesPage = () => {
+    // Assuming all images are in the public/images folder
+    const images = ['/images/kitchen.png', '/images/farm.png', '/images/placeholder.png'];
+
+    const [imageStates, setImageStates] = useState(images.map(() => ({ x: 0, y: 0, dragging: false, offsetX: 0, offsetY: 0 })));
+
+    const handleMouseDown = (index, e) => {
+        e.stopPropagation();
+        const offsetX = e.clientX - imageStates[index].x;
+        const offsetY = e.clientY - imageStates[index].y;
+        setImageStates((prevState) =>
+            prevState.map((state, i) => (i === index ? { ...state, dragging: true, offsetX, offsetY } : state))
+        );
+    };
+
+    const handleMouseMove = (e) => {
+        setImageStates((prevState) =>
+            prevState.map((state) => {
+                if (state.dragging) {
+                    return {
+                        ...state,
+                        x: e.clientX - state.offsetX,
+                        y: e.clientY - state.offsetY,
+                    };
+                }
+                return state;
+            })
+        );
+    };
+
+    const handleMouseUp = () => {
+        setImageStates((prevState) => prevState.map((state) => ({ ...state, dragging: false })));
+    };
+
+    useEffect(() => {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, []);
+
+    return (
+        <div className="container mx-auto px-4 py-8 text-center">
+            <h2 className="text-2xl font-semibold mb-4">Images</h2>
+            <p className="mb-6">Drag the images into your own groupings!</p>
+            <div className="relative">
+                {images.map((imageUrl, index) => (
+                    <Image
+                        key={index}
+                        src={imageUrl}
+                        alt={`Image ${index}`}
+                        width={200}
+                        height={200}
+                        className="generated-image"
+                        style={{
+                            position: 'absolute',
+                            left: `${imageStates[index].x}px`,
+                            top: `${imageStates[index].y}px`,
+                            cursor: imageStates[index].dragging ? 'grabbing' : 'grab',
+                            userSelect: 'none',
+                            transition: 'transform 0.1s',
+                        }}
+                        onMouseDown={(e) => handleMouseDown(index, e)}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default DisplayImagesPage;

frontend/src/app/environments/[id]/page.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { environments } from '../../../data/environments';
+import Button from '../../../components/common/Button';
+
+const EnvironmentPage: React.FC = () => {
+    const { id } = useParams();
+    const router = useRouter();
+    const [input, setInput] = useState<string>('');
+    const [submittedWords, setSubmittedWords] = useState<string[]>([]);
+
+    const environmentId = Number(id);
+    const environment = environments.find((env) => env.id === environmentId);
+
+    useEffect(() => {
+        // Load submitted words from localStorage when the component mounts
+        const storedWords = localStorage.getItem(`submittedWords-${environmentId}`);
+        if (storedWords) {
+            setSubmittedWords(JSON.parse(storedWords));
+        }
+    }, [environmentId]);
+
+    useEffect(() => {
+        // Save submitted words to localStorage whenever they change
+        localStorage.setItem(`submittedWords-${environmentId}`, JSON.stringify(submittedWords));
+    }, [submittedWords, environmentId]);
+
+    if (!environment) {
+        return (
+            <div className="container mx-auto px-4 py-8 text-center">
+                <h1 className="text-3xl font-bold mb-4">Environment Not Found</h1>
+                <Button variant="primary" size="medium" onClick={() => router.push('/')}>
+                    Go Back Home
+                </Button>
+            </div>
+        );
+    }
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (input.trim() !== '' && isValidWord(input, environment.name)) {
+            setSubmittedWords((prevWords) => [...prevWords, input.trim()]);
+            setInput('');
+        } else {
+            alert('Please enter a valid word related to the environment.');
+        }
+    };
+
+    // Simple word validation (this can be extended further)
+    const isValidWord = (word: string, environmentName: string): boolean => {
+        const validWords = {
+            Kitchen: ['knife', 'refrigerator', 'spoon', 'oven'],
+            Farm: ['tractor', 'cow', 'barn', 'hay'],
+            Library: ['book', 'shelf', 'lamp', 'table'],
+            Office: ['computer', 'desk', 'chair', 'printer'],
+        };
+
+        const normalizedWord = word.toLowerCase().trim();
+        return validWords[environmentName as keyof typeof validWords]?.includes(normalizedWord) ?? false;
+    };
+
+    return (
+        <div className="container mx-auto px-4 py-8 flex flex-col items-center">
+            <h1 className="text-3xl font-bold mb-6">{environment.name}</h1>
+            <div className="w-full max-w-md">
+                <Image
+                    src={environment.image}
+                    alt={`${environment.name} Image`}
+                    width={600}
+                    height={400}
+                    className="w-full h-auto rounded-lg shadow-md"
+                />
+            </div>
+            <form onSubmit={handleSubmit} className="w-full max-w-md mt-6">
+                <label htmlFor="word-input" className="block text-lg font-medium mb-2">
+                    Type a word related to {environment.name}:
+                </label>
+                <input
+                    type="text"
+                    id="word-input"
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                    placeholder={`e.g., Knife, Refrigerator`}
+                    required
+                />
+                <Button variant="primary" size="medium" type="submit" className="mt-4 w-full">
+                    Submit
+                </Button>
+            </form>
+            {submittedWords.length > 0 && (
+                <div className="w-full max-w-md mt-6">
+                    <h2 className="text-2xl font-semibold mb-2">Your Words:</h2>
+                    <ul className="list-disc list-inside">
+                        {submittedWords.map((word, index) => (
+                            <li key={index} className="text-lg">
+                                {word}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default EnvironmentPage;

frontend/src/app/globals.css

@@ -7,12 +7,63 @@
 :root {
   --font-poppins: 'Poppins', sans-serif;
   --font-roboto: 'Roboto', sans-serif;
+
+  /* Define global color variables */
+  --color-primary: #0077b6; /* Accessible blue */
+  --color-secondary: #00b4d8;
+  --color-background: #f1f5f9; /* Light gray for background */
+  --color-text-primary: #1a202c; /* Dark text for readability */
+  --color-text-secondary: #4a5568; /* Lighter text for subheadings */
 }
 
 body {
   font-family: var(--font-roboto);
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
+  line-height: 1.6;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-poppins);
+  color: var(--color-text-secondary);
+}
+
+/* Accessibility focus states */
+a:focus,
+button:focus,
+input:focus {
+  outline: 2px dashed var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Button hover and focus states for better user experience */
+button {
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+  background-color: var(--color-secondary);
+  transform: scale(1.05);
+}
+
+input {
+  transition: border-color 0.3s ease;
+}
+
+input:focus {
+  border-color: var(--color-primary);
+}
+
+/* Add subtle animations */
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 1s ease-in-out;
 }

frontend/src/app/instruction/page.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const InstructionPage: React.FC = () => {
+    return (
+        <div className="container mx-auto px-4 py-8">
+            <h1 className="text-3xl font-bold mb-4">How to Use Digital Memory Playground</h1>
+            <ol className="list-decimal list-inside text-lg">
+                <li className="mb-2">
+                    <strong>Select a Scene:</strong> Choose a scene (Kitchen, Farm, Library, Office) by clicking the "Select" button.
+                </li>
+                <li className="mb-2">
+                    <strong>Engage with Exercises:</strong> Complete the exercises shown for each scene.
+                </li>
+                <li className="mb-2">
+                    <strong>Monitor Your Progress:</strong> Track your progress as you go through the scenes.
+                </li>
+                <li>
+                    <strong>Explore Different Scenes:</strong> Try different scenes to experience varied cognitive activities.
+                </li>
+            </ol>
+        </div>
+    );
+};
+
+export default InstructionPage;

frontend/src/app/layout.tsx

@@ -1,41 +1,16 @@
-// frontend/src/app/layout.tsx
-
-import './globals.css';
 import React from 'react';
 import Header from '../components/common/Header';
 import Footer from '../components/common/Footer';
-import { AppProvider } from '@/context/AppContext';
-import { Poppins, Roboto } from '@next/font/google';
-
-const poppins = Poppins({
-    subsets: ['latin'],
-    weight: ['400', '600', '700'],
-    variable: '--font-poppins',
-});
-
-const roboto = Roboto({
-    subsets: ['latin'],
-    weight: ['400', '500', '700'],
-    variable: '--font-roboto',
-});
-
-export const metadata = {
-    title: 'Digital Memory Playground',
-    description:
-        'Enhancing memory and cognitive skills for seniors and individuals with cognitive impairments.',
-};
+import './globals.css';
 
 const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     return (
         <html lang="en">
-        <body
-            className={`${poppins.variable} ${roboto.variable} flex flex-col min-h-screen font-roboto`}
-        >
-        <AppProvider>
-            <Header title="Digital Memory Playground" />
-            <main className="flex-grow container mx-auto p-4">{children}</main>
-            <Footer />
-        </AppProvider>
+        <head />
+        <body className="flex flex-col min-h-screen">
+        <Header />
+        <main className="flex-grow">{children}</main>
+        <Footer />
         </body>
         </html>
     );